:root {
    --imagen-fondo-avif: url(/img/reservas/background.avif);
    --imagen-fondo-png: url(/img/reservas/background.png);
    --chocotale--: #46220f;
    --cafe--: #704214;
    --transparent-cafe: #704214c5;
    --moca--: #7a4a20c0;
    --beige--: #f0bf95ce;
    --orange--: #fc703c;
    --white--: #fff;
  }


* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--transparent-cafe);
    overflow: hidden;
    margin: 0;
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
    justify-content: center;
}

.frame-wrapper {
    background-image: var(--imagen-fondo-png);
    background-size: 100% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px 20px; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 550px; 
}

@supports (background-image: var(--imagen-fondo-avif)) {
    .frame-wrapper {
      background-image: var(--imagen-fondo-avif);  
    }
  }

.us-container {
    width: 100%;
}

.us-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    margin: 10px 20px;
}

.us {
    margin-right: 10px;
}
.nosotros-text {
    color: var(--beige--); 
    margin-left: 6px; 
    font-size: 1.2em; 
    margin-top: 5px;
}

.logo img {
    width: 100%; 
    height: auto;
    display: block; 
}


.logo {
    width: 150px; 
    display: inline-block; 
}

main {
    flex-grow: 1; 
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 100%;
}

.form-container {
    border: 2px solid white;
    background-color: var(--beige--); 
    border-radius: 15px;
    padding: 25px;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}
.form-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #fff;
}
.input-group {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.date-selector, .time-selector {
    position: relative;
    flex-grow: 1;
}
.quantity-selector {
    display: flex;
    align-items: center;
    background-color: white;
    color: black;
    border-radius: 8px;
    padding: 8px;
    flex-grow: 1;
    position: relative;
    padding-right: 30px;
}
.quantity-button {
    background: none;
    border: 1px solid var(--chocotale--);
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px 10px;
    width:30px;
    height:30px;
    border-radius: 50%;
}
.quantity-text {
    flex-grow: 1;
    text-align: center;
}
input::placeholder {
    font-family: "Special Elite", system-ui;
    font-size: 14px; 
  }
.date-selector, .time-selector {
    position: relative;
    flex-grow: 1;
}
.time-input {
    border: none;
    border-radius: 8px;
    padding: 10px 45px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer; 
}
.date-input {
    border: none;
    border-radius: 8px;
    padding: 10px 30px;
    width: 100%;
    cursor: pointer;
}
.dropdown-icon {
    position: absolute;
    top: 70%;
    left: 10px;
    transform: translateY(-50%);
    pointer-events: none; 
    width: 30px;
    height: 30px;
    color:black;
}
.dropdown-arrow {
    position: absolute;
    color: black;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer; 
}
.text-input, .textarea {
    border: none;
    border-radius: 8px;
    padding-left: 35px;
    padding: 10px 15px;
    width: 100%;
    box-sizing: border-box;
}
.text-input::placeholder, .textarea::placeholder {
    color: black;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}
.textarea {
    resize: vertical;
    min-height: 80px;
}

button a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border:1px solid var(--chocotale--);
    background: var(--transparent-cafe);
    overflow: hidden;
    margin-top: auto;
    text-decoration: none;
    padding: 10px;
  }

  button:hover::after {
    right: auto;
    left: auto;
    width: 100%;
  }
  
  button span {
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    width: 100%;
    padding: 18px 25px;
    color: #fff;
    font-size: 1.125em;
    font-weight: 700;
    letter-spacing: 0.3em;
    z-index: 20;
    transition: all 0.3s ease-in-out;
  }
  
  button:hover span {
    color: white;
    animation: scaleUp 0.3s ease-in-out;
  }
  .especial {
    background-color: white;
    color:black;
    padding: 3vw;
    border-radius: 10px;
    margin: 5px 0 10px 0;
    font-size: 14px;
  }

  .reservar {
    width: 100%;       
    border-radius: 10px;
    border: none;      
    background: none; 
    padding: 0;        
    cursor: pointer;
  }
  @keyframes scaleUp {
    0% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(0.95);
    }
  
    100% {
      transform: scale(1);
    }
  }
  @media (min-width: 1200px) {
    .form-container {
        max-width: 650px; 
        padding: 40px;    
    }

    .form-title {
        font-size: 2.5rem; 
    }

    .text-input, .time-input, .date-input, .quantity-selector {
        padding: 15px;      
        font-size: 1.2rem;  
    }

    .quantity-button {
        width: 40px;
        height: 40px;
    }
}