@font-face {
    font-family: Marvin;
    src: url("../../fonts/MarvinVisions-Bold.woff");
}
@font-face {
    font-family: Archivo;
    src: url("../../fonts/Archivo.ttf");
}
body{
	background-color:#f2e9dd;
}
img
{
	width: 300px;
}

.holder{
	border: 1px solid #0a0a0a;
	text-align: center;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 35px;
}

h1
{
	font-family: Marvin;
	color: #0a0a0a;
	margin-bottom: 30px;
	font-weight: bold;
}
p{
	font-family: 'Archivo';
	color: #0a0a0a;
	font-size: 18px;
}

.pattern-container {
  display: grid;
  grid-template-columns: repeat(6, 15px);
  grid-auto-rows: 15px; /* Filas de 50px */
  width: auto; /* Se adapta según las columnas definidas */
  height: 45px; /* Se adapta al contenido */
  }

  .square {
    width: 15px;
    height: 15px;
  }

  .dark {
    background-color: #0a0a0a; /* Color oscuro */
  }

  .light {
    background-color: #f2e9dd; /* Color claro */
  }

  .top
  {
  	position: fixed;
  	top: 0px;
    z-index: 3;
  }
  .bottom
  {
  	position: fixed;
  	bottom: 0px;
    z-index: 3;
  }

  .button
  {
  	background-color: #0a0a0a;
  	padding: 15px;
	  font-family: Marvin;
	  border-radius: 20px;
	  color: #f2e9dd;
	  font-size: 18px;
	  margin-bottom: 20px;
  }

.yellow
{
  background-color: #e08b1b;
  color: #f2e9dd;
}

.orange
{
  background-color: #dd4719;
  color: #f2e9dd;
}

.blue
{
  background-color: #0d2b3f;
  color: #fcd2d2;
}

.mv
{
  font-family: Marvin;
}

.ar
{
  font-family: Archivo;
}


.menumenu {
  position: fixed;
  top: 30px;
  z-index: 2;
  width: 100vw;
  background-color: #f2e9dd;
  padding-top: 30px;
  display: flex; /* Activa flexbox */
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente si es necesario */
}

.menu-container
{
  margin: 10px;
  margin-top: 0px;
  padding: 5px;
  border-radius: 15px;
  width: 100%;
}

.options-container
{
 border-bottom: 1px solid #f2e9dd;
 margin-bottom: 5px;
 padding: 5px 0px;
}


.menu-option
{
  text-align: center;
  font-family: Marvin;
  width: 100%;
  font-size: 24px;
  color:  #f2e9dd;
}

.submenu-option
{
  text-align: center;
  font-family: Marvin;
  width: 100%;
  font-size: 14px;
  color:  #f2e9dd;
}

.option-selected
{   
  text-decoration: underline
}

.price-in-menu
{
  font-size: 14px;
  font-family: Archivo;
}

.product-card {
  display: flex;
  align-items: center; /* Centra los elementos verticalmente */
  justify-content: space-between; /* Espacia los elementos a lo largo del eje principal */
  border-bottom: 1px solid rgba(10, 10, 10 , 0.3);
  padding: 10px;
  font-family: Archivo;
  color: #0a0a0a;

  /*box-shadow: rgba(242, 233, 221, 0.25) 0px 20px 25px, 
            rgba(242, 233, 221, 0.12) 0px -6px 15px, 
            rgba(242, 233, 221, 0.12) 0px 2px 3px, 
            rgba(242, 233, 221, 0.17) 0px 6px 7px, 
            rgba(242, 233, 221, 0.09) 0px -2px 3px;
*/
}

.product-image {
  width: 50px; /* Tamaño de la imagen */
  height: 50px; /* Tamaño de la imagen */
  object-fit: cover; /* Asegura que la imagen se ajuste al tamaño especificado */
  margin-right: 10px; /* Espacio entre la imagen y el texto */
}

.product-name {
  flex: 1; /* Ocupa el espacio disponible entre la imagen y los botones */
  margin-right: 10px; /* Espacio entre el texto y las acciones */
  font-size: 18px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 5px; /* Espacio entre los botones y el span */
}

.btn {
  padding: 5px 30px;
  font-size: 14px;
  cursor: pointer;
  color: #f2e9dd;
}

.more
{
  background-color: #274c28;

}
.less{
  background-color: #dd4719;
}

.number {
  font-size: 16px;
  font-weight: bold;
  padding: 5px 10px;
}


.fixedbuttons{
  position: fixed; /* Fija el contenedor en un lugar de la pantalla */
  bottom: 0px; /* Posiciónalo en la parte inferior */
  height: 45px; /* Altura fija */
  width: 100%; /* Ancho completo de la pantalla */
  padding: 0 15px; /* Padding horizontal (ajústalo según necesites) */
  display: flex; /* Flexbox para organizar los hijos */
  justify-content: center; /* Espacio entre los hijos */
  align-items: center; /* Alineación vertical al centro */
  box-sizing: border-box; /* Incluye padding en el ancho total */
  z-index: 5; /* Asegura que esté por encima de otros elementos */
  background-color: transparent;
  gap: 10px;
}

.content {
  max-width: 700px; /* Ancho máximo que deseas */
  width: 100%; /* Para que no supere el contenedor padre */
  display: flex; /* Mantiene la distribución de los botones */
  justify-content: space-between;
  align-items: center;
}

.fb-top{
  top: 0px;
}

.fb-bot{
  top: 0px;
}

.fixedbutton-single{
  position: fixed; /* Fija el contenedor en un lugar de la pantalla */
  top:0px; /* Posiciónalo en la parte inferior */
  height: 45px; /* Altura fija */
  width: 100%; /* Ancho completo de la pantalla */
  padding: 0 15px; /* Padding horizontal (ajústalo según necesites) */
  display: block;
  z-index: 5;
  font-family: Archivo;
}

.oc-top{
  top: 0px;
}

.black
{
  background-color: #0a0a0a;
   color: #f2e9dd;
}

.banner-btn {
  flex: 1; /* Ocupan el mismo ancho disponible */
  padding: 5px; /* Espaciado interno */
  font-size: 14px; /* Tamaño del texto */
  text-align: center; /* Centra el contenido dentro del elemento */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Indicador de clic */
  border: none; /* Sin bordes adicionales */
  font-size: 20px;
  margin: 0px 5px;
}

.form-button{
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  border-radius: 5px;
  font-family: Marvin;
}

.form-select
{
  font-family: Archivo;
  width: 100%;
  background-color: #f2e9dd;
  border: 2px solid #e08b1b;
  font-family: Archivo;
}

.selected{
  border: 1px solid black;
  background-color: #dd4719;
}

h2{
  font-family: Marvin;
}

h3{
  font-family: Marvin;
  font-size: 22px;
  text-decoration: underline;
}

.order-resume{
  font-family: Archivo;
  font-size: 14px;
  text
}

label
{
  font-family: Archivo;
  display: block;
  font-size: 17px;
  margin-bottom: 3px;
}

input
{
  width: 100%;
  background-color: #f2e9dd;
  border: 2px solid #e08b1b;
  font-family: Archivo;
}

.payment-data{
  font-family: Archivo;
  color: #0a0a0a;
}

.outer-container {
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  width: 100vw; /* Adjust as needed */
  padding: 0px;
  z-index: 1;
  height: calc(100vh - 90px);
  top: 45px;

}

.view {
  position: absolute;
  top: 0;
  width: 100%; /* Takes up the full width of the container */
  height: 100%; /* Takes up the full height of the container */
  transition: transform 0.5s ease; /* Smooth sliding animation */
  transform: translateX(100%); /* Start outside the container on the right */
  z-index: 2;
  justify-content: center;
}

.view.active {
  transform: translateX(0); /* Active view is fully visible */
}

.view.slide-out-left {
  transform: translateX(-100%); /* Slide out to the left */
}

.view.slide-in-right {
  transform: translateX(0); /* Slide in from the right */
}

.view.slide-out-right {
  transform: translateX(100%); /* Slide out to the right */
}

.view.slide-in-left {
  transform: translateX(0); /* Slide in from the left */
}


.stepper-wrapper {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  color: #f2e9dd;
  font-family: Archivo;
  font-size: 16px;
}
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 10px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 10px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
  font-size: 12px;
}

.stepper-item.active {
  font-weight: bold;
  font-size: 18px;
}

.stepper-item.completed .step-counter {
  background-color: #e08b1b;
}

.stepper-item.active .step-counter {
  background-color: #e08b1b;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #e08b1b;
  width: 100%;
  top: 10px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}
.progress-witch
{
  width: 35px;
  position: absolute;
  top: -40px;
  z-index: 10;
  animation: moverArribaAbajo 1s infinite alternate;
}

@keyframes moverArribaAbajo {
  0% {
    transform: translateY(0); /* Posición inicial */
  }
  100% {
    transform: translateY(+5px); /* Se mueve 50px hacia arriba */
  }
}

#loadingscreen
{
  position: fixed;
  left: 0px;
  width: 100vw;
  height: calc(100vh - 90px);
  top: 45px;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

#user_auth
{
  position: fixed;
  top: -100%;
  left: 0px;
  width: 100vw;
  height: calc(100vh - 90px);
  background-color: #0d2b3f;
  z-index: 999;
  transition: top 0.5s ease;
  color: #fcd2d2;;
}

.register_input{
  border: 2px solid #fcd2d2;
  width: 100%;
  font-family: Archivo;
  background-color: #0d2b3f;
}
#register_input input::placeholder{
  color: #fcd2d2;
}

.auth-holder
{
  border-radius: 25px;
  padding: 20px;
  border: 1px solid #e08b1b; 
}

.auth-text
{
  text-align: center;
  color: #0a0a0a;
}


#user_auth.active {
  top: 45px;
}

#loadingscreen img
{
  width: 30%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.resume-holder
{
  background-color: #0a0a0a;
  color: #f2e9dd;
  border-radius: 20px;
  padding: 10px;
  text-align: center;
}

.following-holder
{
  background-color: #0a0a0a;
  border-radius: 20px;
  padding: 5px;
}

.following-user-data
{
  text-align:center; 
  margin-top: 20px;
  border: 1px solid #e08b1b;
  border-radius: 20px;
  padding: 20px;
}

.user-portal
{
  width: 90vw;
  left: 50%;
  transform: translateX(-50%);
  top: 45px;
  z-index: 10;
  position: fixed;
  border-radius: 20px;
  text-align: center;
  max-height: 0px;
  transition: max-height 0.5s ease;
  overflow: hidden;
}

.portal-open
{
  max-height: 270px;
}

.user-portal-title
{
  text-align:center; 
  border-bottom: 1px solid #fcd2d2;
  font-family: Archivo;
  font-size: 28px;
}

.order
{
  border-bottom: 1px solid #dd4719;
  font-family: Archivo;
  text-align: center;
  padding: 15px 0px;
}
.close-portal-btn{
  position: absolute; 
  top:15px; 
  left:15px; 
  padding:5px 15px; 
  border: 1px solid #fcd2d2; 
  border-radius: 15px;
  font-family: Archivo;
  font-size: 16px;
}