/* ========= VARIABLES DESIGN SYSTEM ========= */
:root{
  --bg: #F8F5F2;          
  --white: #ffffff;         
  --primary: #9B8402;      
  --primary-dark: #b08945;
  --success: #3A5A40;      
  --error: #a13d3d;       
  --text: #333333;        
  --text-light: #6d6d6d;  
  --text-price: #9B8402;
  --border: #e0d9d1;     
  --disabled: #949072;
  --radius:14px;
  --shadow:0 8px 20px rgba(0,0,0,.06);
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --transition:.25s ease;
}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  margin:0;
}

/* ========= CONTENEDOR PRINCIPAL ========= */
.booking-form-container{
  max-width: 680px;
  width: 100%;
  margin: 4vh auto;
  padding: 40px 32px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: fade .6s ease;
  box-sizing: border-box;
}

.booking-form{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Asegurarnos que los campos internos respeten el ancho */
.booking-form .form-row{
  width: 100%;
  box-sizing: border-box;
}

.booking-form .booking-section {
  width: 100%;
  box-sizing: border-box;
}

/* Ajustar responsive */
@media(max-width: 600px){
  .booking-form-container{
    width: 100%;
    margin: 0;
    padding: 24px 20px;
    border-radius: 0;
  }
}

/* ========= CABECERA ========= */
.booking-product-info{
  text-align:center;
  margin-bottom:32px;
}
.booking-product-info h3{
  font-size:28px;
  font-weight:700;
  margin:0 0 8px;
  color:var(--text);
}
.booking-product-info .base-price{
  font-size:16px;
  color:var(--text-price);
}

/* ========= SECCIONES ========= */
.booking-section{
  margin-bottom:36px;
}
.booking-section h4{
  font-size:18px;
  font-weight:600;
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:8px;
}
.booking-section h4::before{
  content:'';
  width:10px;
  height:10px;
  background:var(--primary);
  border-radius:50%;
}

/* ========= CAMPOS ========= */
.form-row{
  margin-bottom:20px;
}
.form-row label{
  display:block;
  font-size:14px;
  font-weight:500;
  margin-bottom:6px;
}
.form-row input,
.form-row select{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:15px;
  transition:var(--transition);
}
.form-row input:focus,
.form-row select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,102,255,.15);
  outline:none;
}

/* ========= DATEPICKER ========= */
.datepicker{cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%230066ff' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z'/%3E%3C/svg%3E") no-repeat right 16px center/20px;padding-right:48px;}

/* ========= DURACIÓN ========= */
.booking-duration{
  text-align:center;
  padding:12px;
  background:var(--bg);
  border-radius:var(--radius);
  font-weight:600;
  color:var(--primary);
}

/* ========= SERVICIOS ========= */
.services-intro{font-size:14px;color:var(--text-light);margin-bottom:12px;}
.services-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;}
@media(max-width:600px){
  .services-grid{grid-template-columns:1fr;}
}
.service-card{
  position:relative;
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  cursor:pointer;
  transition:var(--transition);
  text-align:center;
}
.service-card:hover{border-color:var(--primary);transform:translateY(-2px);}
.service-card input{position:absolute;opacity:0;}
.service-card input:checked + .service-content{border-color:var(--primary);background:rgba(0,102,255,.05);}
.service-content{display:block;}
.service-name{font-weight:600;font-size:15px;margin-bottom:4px;}
.service-price{font-size:13px;color:var(--primary);}
.service-card input:checked + .service-content::before{
  content:'✓';
  position:absolute;
  top:8px;
  right:8px;
  color:var(--success);
  font-weight:700;
}

/* ========= INVITADOS ========= */
#guests-section{background:var(--bg);border-radius:var(--radius);padding:20px;margin-top:12px;}
.guest-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.guest-type input[type="number"] {
    width: 70px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
}

.guests-info {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 16px;
}

/* ========= RESUMEN ========= */
.price-summary{
  background:var(--bg);
  border-radius:var(--radius);
  padding:24px;
}
.price-line{
  display:flex;
  justify-content:space-between;
  font-size:15px;
  margin-bottom:8px;
}
.price-line.total-price{
  font-weight:700;
  font-size:18px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

/* ========= BOTÓN ========= */
.booking-submit-btn{
  width:100%;
  padding:18px;
  background:var(--primary);
  color:#fff;
  border:0;
  border-radius:var(--radius);
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
}
.booking-submit-btn:hover{background:var(--primary-dark);}
.booking-submit-btn:disabled{background:var(--disabled);cursor:not-allowed;}

/* ========= MENSAJES ========= */
.booking-message{
  border-radius:var(--radius);
  padding:14px 18px;
  margin-bottom:20px;
  font-size:14px;
}
.booking-message-success{background:var(--success);color:#fff;}
.booking-message-error{background:var(--error);color:#fff;}

/* ========= RESPONSIVE ========= */
@media(max-width:600px){
  .booking-form-container{margin:0;padding:24px 20px;border-radius:0;}
}