:root{
  --tambo: #705546;
  --tambo-dark: #5b4337;
  --white: #ffffff;
}

/* =========================================
   BASE
   ========================================= */
*{ box-sizing: border-box; }

.casa-reservas-wrap{
  width: 100%;
  max-width: 100%;
}

/* =========================================
   BARRA HORIZONTAL (desktop)
   ========================================= */
.casa-reservas-bar{
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 0.9fr;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 1100px;

  /* clave: centrar en desktop */
  margin-left: auto;
  margin-right: auto;
}

/* Campos */
.cr-field{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 100%;
}

.cr-label{
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 4px;
}

#cr_checkin, #cr_checkout, #cr_purpose{
  width: 100%;
  max-width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 0;
  font-size: 16px; /* iOS: evita zoom */
  color: #2b2b2b;
}

/* =========================================
   BOTÓN BUSCAR
   ========================================= */
.cr-field-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  min-height: 58px;
  width: 100%;
}

#cr_check.cr-btn{
  width: 100%;
  height: 46px;               /* menos alto */
  min-height: 46px;
  border-radius: 10px;
  border: 2px solid var(--tambo);
  background: var(--tambo);
  color: var(--white);
  font-weight: 800;
  letter-spacing: .6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease;
  text-transform: uppercase;
}

#cr_check.cr-btn:hover{
  background: #fff;
  color: var(--tambo);
  border-color: var(--tambo);
}

#cr_check.cr-btn:active{ transform: scale(0.99); }

/* =========================================
   RESULTADOS
   ========================================= */
.casa-reservas-result{
  margin-top: 12px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

#cr_result .cr-alert{
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  color: #111;
}

#cr_result .cr-alert-ok{ border-left: 6px solid rgba(112,85,70,0.90); }
#cr_result .cr-alert-error{ border-left: 6px solid rgba(180,60,60,0.90); }
#cr_result .cr-alert-warn{ border-left: 6px solid rgba(180,140,60,0.90); }

#cr_result small{
  display: inline-block;
  margin-top: 6px;
  opacity: 0.85;
}

/* =========================================
   BOTÓN RESERVAR / SUBMIT
   ========================================= */
#cr_open_form.cr-btn,
#cr_submit.cr-btn{
  height: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 2px solid var(--tambo);
  background: var(--tambo);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease;
}

#cr_open_form{
  display: block;
  width: min(420px, 100%);
  margin: 10px auto 0;
}

#cr_open_form:hover,
#cr_submit:hover{
  background: #fff;
  color: var(--tambo);
  border-color: var(--tambo);
}

#cr_open_form:active,
#cr_submit:active{ transform: scale(0.99); }

/* =========================================
   FORM
   ========================================= */
.casa-reservas-form{
  margin-top: 14px;
  max-width: 1100px;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);

  margin-left: auto;
  margin-right: auto;
}

.casa-reservas-form h3{ margin: 0 0 10px; color: #fff; }
.casa-reservas-form label{ color: #fff; }

.cr-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#cr_name, #cr_email, #cr_phone, #cr_message{
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.92);
  outline: none;
  font-size: 16px; /* iOS: evita zoom */
}

.cr-textarea{ margin-top: 10px; }
.casa-reservas-confirm{ margin-top: 10px; }

.cr-suggestions ul{ margin: 10px 0 0; padding-left: 16px; }
.cr-sug{ text-decoration: underline; }

/* =========================================
   MOBILE FIX (ESTE ES EL IMPORTANTE)
   - padding lateral simétrico
   - nada se sale del contenedor
   ========================================= */
@media (max-width: 900px){

  /* El wrap crea espacio lateral REAL (para que no pegue al borde) */
  .casa-reservas-wrap{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Barra a 1 columna y ocupa todo el ancho */
  .casa-reservas-bar{
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    margin: 0 auto !important;
  }

  /* Cada campo blanco con padding interno simétrico */
  .cr-field{
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important; /* <-- aire derecha/izquierda */
    margin: 0 !important;
  }

  /* Importante: evita overflow en iOS */
  .cr-field,
  .casa-reservas-bar,
  .casa-reservas-result,
  .casa-reservas-form{
    overflow: hidden;
  }

  /* Inputs al 100% */
  #cr_checkin, #cr_checkout, #cr_purpose,
  #cr_name, #cr_email, #cr_phone, #cr_message{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Botón buscar centrado */
  .cr-field-btn{
    min-height: auto !important;
  }
  #cr_check.cr-btn{
    height: 46px !important;
  }

  /* Resultados y form alineados con el mismo padding lateral */
  .casa-reservas-result,
  .casa-reservas-form{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Form grid a 1 columna */
  .cr-grid{
    grid-template-columns: 1fr !important;
  }
}