/* ============================
   Laundry Booking Form Pro — CSS completo
   ============================ */
:root{
  --lbp-primary: #0073aa;
  --lbp-primary-hover: #005f8d;
  --lbp-terms-text: #111;
  --lbp-surface: #f9f9f9;
  --lbp-border: #ddd;

  /* Neutros UI */
  --lbp-ui-bg: #f2f6fb;
  --lbp-ui-bg-hover: #e7eef6;
  --lbp-text: #0f172a;
}

/* ===== Container ===== */
.lbp-wrapper{
  max-width: 560px;
  margin: 0 auto;
  background: var(--lbp-surface);
  border: 1px solid var(--lbp-border);
  border-radius: 12px;
  padding: 20px;
}

.lbp-title{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--lbp-text);
}

/* ===== Form fields ===== */
.lbp-form label{
  display: block;
  margin-top: 12px;
  font-weight: 600;
  color: #111;
}

.lbp-form input,
.lbp-form select,
.lbp-form textarea{
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  color: var(--lbp-text);
}

.lbp-form input:focus,
.lbp-form select:focus,
.lbp-form textarea:focus{
  outline: none;
  border-color: var(--lbp-primary);
  box-shadow: 0 0 0 3px rgba(0,115,170,.15);
}

/* ===== Ironing (add-on) ===== */
.lbp-ironing{
  margin-top: 14px;
  border: 1px solid #cdd7e1;
  background: #f6fbff;
  border-radius: 10px;
  padding: 12px;
}

.lbp-ironing legend{
  font-weight: 700;
  padding: 0 6px;
  margin: 0 0 4px;   /* menos espacio antes del Yes/No */
  color: var(--lbp-text);
}

.lbp-ironing-yesno{
  display: flex;
  gap: 16px;
  margin-top: 4px;   /* reducido */
}

.lbp-radio{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  color: var(--lbp-text);
}

.lbp-ironing-fields{ margin-top: 10px; }

.lbp-help{
  margin: 8px 0 0;
  font-size: 12px;
  color: #444;
}

/* ===== Stepper [-] 0 [+] ===== */
/* Quitar spinners nativos */
.lbp-qty input[type="number"]::-webkit-outer-spin-button,
.lbp-qty input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.lbp-qty input[type="number"]{ -moz-appearance: textfield; }

.lbp-qty{
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #cdd7e1;
  background: var(--lbp-ui-bg);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}

.lbp-qty .lbp-step{
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 40px; border: 0; background: transparent;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--lbp-text);
  cursor: pointer;
  transition: background .15s ease, transform .06s ease;
  outline: none;
  user-select: none;
}

.lbp-qty .lbp-step:hover{ background: var(--lbp-ui-bg-hover); }
.lbp-qty .lbp-step:active{ transform: scale(.97); }
.lbp-qty .lbp-step:focus-visible{ box-shadow: inset 0 0 0 2px var(--lbp-primary); }
.lbp-qty .lbp-step[disabled]{ opacity: .35; cursor: not-allowed; }

.lbp-qty input[type="number"]{
  width: 76px; height: 40px;
  border: 0 !important; background: transparent !important;
  text-align: center; font-size: 16px; font-weight: 600;
  color: var(--lbp-text); padding: 0; margin: 0;
}

/* ===== Actions ===== */
.lbp-actions{
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.lbp-btn-primary,
.lbp-btn-secondary{
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
}

.lbp-btn-primary{
  background: var(--lbp-primary);
  color: #fff;
}
.lbp-btn-primary:hover{ background: var(--lbp-primary-hover); }

.lbp-btn-secondary{
  background: #e9eef3;
  color: #111;
}
.lbp-btn-secondary:hover{ background: #dae3ea; }

/* ===== Note ===== */
.lbp-note{
  margin-top: 12px;
  font-size: 13px;
  color: #333;
}

/* ===== Terms (collapsible) ===== */
.lbp-terms{
  margin-top: 14px;
  border: 1px solid #cdd7e1;
  background: #eef6ff;
  border-radius: 10px;
  padding: 12px;
  color: var(--lbp-terms-text);
}

.lbp-terms-toggle{
  background: transparent;
  border: 0;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  color: var(--lbp-terms-text);
}

.lbp-terms-content{
  margin-top: 10px;
  color: var(--lbp-terms-text);
}

.lbp-terms-list{ margin: 6px 0 10px 18px; }

.lbp-terms-accept{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  font-weight: 600;
  color: var(--lbp-terms-text);
}

/* ===== Helpers ===== */
#lbp-date::-webkit-calendar-picker-indicator{ cursor: pointer; }

/* ===== Responsive ===== */
@media (max-width: 420px){
  .lbp-qty input[type="number"]{ width: 64px; }
  .lbp-qty .lbp-step{ width: 40px; height: 38px; }
}

/* ---- Ajuste de espacio: Ironing -> No/Yes ---- */
.lbp-ironing { padding-top: 8px; }              /* menos aire arriba */
.lbp-ironing legend{ margin: 0 0 0; line-height: 1.1; }
.lbp-ironing-yesno{ margin-top: 2px; gap: 12px; }  /* casi pegado al título */

/* ---- Stepper: centra perfecto el + y − ---- */
/* Ocultamos el texto interno del botón y dibujamos el símbolo centrado con ::before */
.lbp-qty .lbp-step{
  position: relative;
  width: 44px; height: 40px;
  padding: 0; border: 0; background: transparent;
  font-size: 0;             /* oculta el texto original para que no desplace */
  cursor: pointer;
  transition: background .15s ease, transform .06s ease;
}
.lbp-qty .lbp-step::before{
  content: "";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; line-height: 1; color: #0f172a;
}
.lbp-qty .lbp-step[data-step="-1"]::before{ content: "−"; }  /* U+2212: minus */
.lbp-qty .lbp-step[data-step="1"]::before { content: "+"; }

.lbp-qty .lbp-step:hover{ background: #e7eef6; }
.lbp-qty .lbp-step:active{ transform: scale(.97); }

/* Quitar spinners del input y mantenerlo alineado */
.lbp-qty input[type="number"]{
  width: 76px; height: 40px;
  border: 0 !important; background: transparent !important;
  text-align: center; font-size: 16px; font-weight: 600; color: #0f172a;
  padding: 0; margin: 0;
}
.lbp-qty input[type="number"]::-webkit-outer-spin-button,
.lbp-qty input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.lbp-qty input[type="number"]{ -moz-appearance: textfield; }