:root {
    /* Malibu Blue */
    --mar-del-cabo-malibu-100: #387eaf;
    --mar-del-cabo-malibu-200: #5090b8;
    --mar-del-cabo-malibu-300: #7cacc9;
    --mar-del-cabo-malibu-400: #bcd5e5;
}

body {
    margin: 0;
    padding: 0;
}

.form.group {
    margin-bottom: 0px; 
}

.contact-form {
    /* Mantener el estilo visual pero sin romper la responsividad
       definida en `reservations_styles.css`. */
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border-radius: 0px;
    box-shadow: none;
    border: 0px solid transparent;
    box-sizing: border-box; 
    scroll-behavior: auto;
    overflow-y: visible;
}

@media (max-width: 768px) {
    .contact-form {
        padding-bottom: 200px; /* Matched 200px buffer */
        padding-left: 20px;
        padding-right: 20px;
    }
}

.form-group label {
    color: #74756C;
    letter-spacing: 0px;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    border-radius: 0px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border: 1px solid #7cacc9;
    background: transparent;
}

.form-group.has-error .input-error-message,
.form-group.has-error .input-error-icon {
    margin-bottom: 0 !important;
}

.checkbox-group a:hover {
    color: #7d91a0;
    text-decoration: none;
}

.checkbox-group input[type="checkbox"] {
    accent-color: #3b596f;
}

.btn-primary {
    border-radius: 0px;
}

.btn-primary:hover {
    background-color: #74756C;
}

#recaptcha-container {
  margin: 10px 0;
  display: flex;
  justify-content: center;
}

@media (max-width: 350px) {
  #recaptcha-container {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}

@media (max-width: 480px) {
    /* Que la fecha de llegada use todo el ancho en mobile solo en MEET */
    #date-group {
        width: 100%;
        max-width: 100%;
    }
}