/* ==========================================================
   City Wide Cleaning — Estilos del flujo de reserva (booking)
   Reutiliza las variables de styles.css (cargado antes).
   ========================================================== */

.booking-body{background:#f3f7ff}

.booking-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.booking-header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}

.booking-wrap{display:grid;grid-template-columns:1fr;gap:24px;padding-top:24px;padding-bottom:48px;align-items:start}
.booking-title{font-size:1.6rem;margin-bottom:18px}
.step-subtitle{font-size:1.25rem;margin:24px 0 28px}
.step-hint{color:var(--muted);margin:0 0 16px;font-size:.95rem}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:22px}

/* Mostrar/ocultar pasos (la clase .step también existe en el home centrada;
   aquí la forzamos alineada a la izquierda) */
.step{display:none}
.step.active{display:block}
.booking-main .step{text-align:left}

/* ---- Selectores de pills (bed/bath) ---- */
.selector-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0}
.selector-row+.selector-row{border-top:1px solid var(--line)}
.selector-label{font-weight:600;color:var(--navy);font-size:1.05rem}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{min-width:48px;padding:10px 14px;border:1.5px solid var(--line);background:#fff;border-radius:10px;
  font:inherit;font-weight:600;color:var(--navy);cursor:pointer;transition:.15s}
.pill:hover{border-color:var(--blue)}
.pill.selected{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---- Cabecera de industria (calculadora comercial) ---- */
.facility-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.facility-emoji{font-size:2.2rem;line-height:1;flex:0 0 auto}
.facility-head strong{display:block;color:var(--navy);font-size:1.15rem;margin-bottom:8px}
.facility-points{list-style:none;padding:0;margin:0}
.facility-points li{position:relative;padding-left:22px;margin-bottom:5px;color:var(--ink);font-size:.92rem}
.facility-points li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.facility-change{display:inline-block;color:var(--blue);font-weight:600;font-size:.9rem;text-decoration:none}
.facility-change:hover{text-decoration:underline}

/* ---- Tarjetas de servicio (tier) ---- */
.tiers{display:grid;grid-template-columns:1fr;gap:16px}
.tier-card{position:relative;background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  padding:24px 20px 20px;cursor:pointer;transition:.15s}
.tier-card:hover{border-color:#9bbcf7}
.tier-card.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.tier-card h3{font-size:1.3rem;margin:6px 0 12px}
.tier-card ul{list-style:none;padding:0;margin:0 0 16px}
.tier-card li{position:relative;padding-left:24px;margin-bottom:8px;color:var(--ink);font-size:.95rem}
.tier-card li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.tier-time{background:#f3f7ff;border-radius:10px;padding:10px 12px;font-weight:600;color:var(--navy);font-size:.92rem}
.tier-badge{position:absolute;top:-12px;left:20px;font-size:.74rem;font-weight:700;color:#fff;
  padding:5px 12px;border-radius:999px}
.badge-blue{background:var(--blue)}
.badge-teal{background:var(--green)}

/* ---- Frecuencia ---- */
.freq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.freq-card{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;background:#fff;border:2px solid var(--line);
  border-radius:var(--radius);padding:18px;cursor:pointer;font:inherit;transition:.15s;overflow:hidden}
.freq-card .freq-badge{position:absolute;top:0;right:0;background:var(--blue);color:#fff;font-weight:700;
  font-size:.72rem;letter-spacing:.02em;padding:5px 12px;border-radius:0 calc(var(--radius) - 2px) 0 10px}
.freq-card:hover{border-color:#9bbcf7}
.freq-card.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.freq-card strong{color:var(--navy);font-size:1.05rem}
.freq-card span{color:var(--green);font-weight:600;font-size:.9rem}

/* ---- Campos (when / where) ---- */
.field{display:block;font-size:.86rem;font-weight:600;color:var(--navy);margin-bottom:16px;text-align:left}
.field:last-child{margin-bottom:0}
.field input,.field select,.field textarea{width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid #c3cdda;
  border-radius:10px;font:inherit;font-size:1rem;color:var(--ink);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.field-row{display:grid;grid-template-columns:1fr;gap:0}

/* Validación de campos requeridos */
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#dc2626;background:#fff7f7}
.req-msg{color:#dc2626;font-size:.82rem;font-weight:600;margin:5px 0 0}
.choice-grid.invalid .choice{border-color:#f0a8af}
.group-req-msg{color:#dc2626;font-size:.85rem;font-weight:600;margin:0 0 10px}

/* ---- Selector de fechas (paso 3) ---- */
.month-label{font-size:1.2rem;margin:0 0 16px}
.date-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.date-row{display:flex;align-items:center;gap:18px;background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:14px 18px;cursor:pointer;transition:.15s}
.date-row:hover{border-color:#9bbcf7}
.date-row.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.date-day{flex:0 0 52px;text-align:center;line-height:1.1;border-right:1px solid var(--line);padding-right:18px}
.date-day .dn{display:block;font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase}
.date-day .num{display:block;font-size:1.5rem;font-weight:800;color:var(--navy)}
.date-info{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.date-window{font-weight:600;color:var(--navy)}
.date-off{background:#7cb305;color:#fff;font-weight:700;font-size:.8rem;padding:5px 12px;border-radius:999px}
.date-row.unavailable{cursor:not-allowed;border-color:var(--line);
  background:repeating-linear-gradient(45deg,#f6f7f9,#f6f7f9 12px,#eceef1 12px,#eceef1 24px)}
.date-row.unavailable .date-day{border-right-color:#dfe3e8}
.date-row.unavailable .date-day .num,.date-row.unavailable .date-day .dn{color:var(--muted)}
.date-unavail-label{color:var(--muted);font-weight:700}
.date-loading{color:var(--muted)}

/* Panel de horarios (al elegir una fecha) */
.time-panel{background:#f7f9fc;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:12px}
.time-flexible{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--line);border-radius:12px;
  padding:14px 16px;cursor:pointer;margin-bottom:18px;transition:.15s}
.time-flexible:hover{border-color:#9bbcf7}
.time-flexible.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.time-flexible .sun{font-size:1.5rem}
.time-flexible-text strong{display:block;color:var(--navy)}
.time-flexible-text .sub{color:var(--muted);font-size:.88rem}
.time-flexible .time-off{margin-left:auto}
.time-off{background:var(--green);color:#fff;font-weight:700;font-size:.78rem;padding:4px 10px;border-radius:999px;white-space:nowrap}
.time-panel h4{margin:6px 0 2px;font-size:1.02rem}
.time-hint{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.time-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.time-slot{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:2px solid var(--line);
  border-radius:10px;padding:12px 14px;font:inherit;font-weight:600;color:var(--navy);cursor:pointer;transition:.15s}
.time-slot:hover{border-color:#9bbcf7}
.time-slot.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
@media(min-width:560px){.time-grid{grid-template-columns:repeat(3,1fr)}}

/* ---- Opciones (mascotas / acceso) ---- */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.choice{background:#fff;border:2px solid var(--line);border-radius:12px;padding:18px;font:inherit;font-weight:600;
  color:var(--navy);cursor:pointer;text-align:left;transition:.15s}
.choice:hover{border-color:#9bbcf7}
.choice.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.choice-wide{grid-column:1 / -1}

/* ---- Add-ons ---- */
.addon-list{display:flex;flex-direction:column;gap:12px}
.addon{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);
  border-radius:12px;padding:16px 18px;font:inherit;cursor:pointer;transition:.15s}
.addon:hover{border-color:#9bbcf7}
.addon.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.addon-name{font-weight:600;color:var(--navy)}
.addon-price{font-weight:700;color:var(--muted)}
.addon.selected .addon-price{color:var(--blue)}

/* ---- Review (paso 5) ---- */
.review-card .rrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.review-card .rrow:last-child{border-bottom:0}
.review-card .rrow span:first-child{color:var(--muted)}
.review-card .rrow span:last-child{font-weight:600;color:var(--navy);text-align:right}

/* ---- Navegación ---- */
.booking-nav{display:flex;gap:14px;justify-content:space-between;margin-top:32px}
.tiers,.freq-grid,.when-card,.where-card,.review-card{margin-bottom:8px}
.booking-nav .btn{flex:1}

/* ============ BARRA LATERAL ============ */
.booking-summary{background:#fff;border:1px solid #cfe0ff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.summary-head{background:#3b82f6;color:#fff;font-weight:700;font-size:1.15rem;padding:16px 20px;display:flex;align-items:center;gap:10px}
.summary-body{padding:18px 20px}
.summary-steps{list-style:none;padding:0;margin:0 0 18px}
.summary-steps li{position:relative;display:flex;gap:12px;align-items:flex-start;padding:10px 0;cursor:pointer}
/* línea conectora vertical detrás de los círculos */
.summary-steps li::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:var(--line);z-index:0}
.summary-steps li:first-child::before{top:24px}
.summary-steps li:last-child::before{bottom:auto;height:24px}
.summary-steps li.done::before{background:var(--navy)}
.summary-steps .snum{position:relative;z-index:1;flex:0 0 28px;height:28px;border-radius:50%;border:2px solid var(--line);
  background:#fff;display:grid;place-items:center;font-weight:700;color:var(--muted);font-size:.85rem}
.summary-steps li.active .snum{border-color:var(--navy);color:var(--navy)}
.summary-steps li.done .snum{background:var(--navy);border-color:var(--navy);color:#fff;font-size:0}
.summary-steps li.done .snum::after{content:"✓";font-size:.95rem}
.summary-steps strong{display:block;color:var(--navy);font-size:.95rem}
.summary-steps em{font-style:normal;color:var(--muted);font-size:.85rem}
.summary-steps em:empty{display:none}

.summary-totals{border-top:1px solid var(--line);padding-top:14px}
.trow{display:flex;justify-content:space-between;padding:6px 0;color:var(--ink);font-size:.95rem}
.trow-discount span:last-child{color:var(--green);font-weight:600}
.trow-total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:800;font-size:1.15rem;color:var(--navy)}
.tip-buttons{display:flex;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.tip-btn{padding:8px 14px;border:1.5px solid var(--line);background:#fff;border-radius:8px;font:inherit;font-weight:600;
  color:var(--navy);cursor:pointer;transition:.15s}
.tip-btn:hover,.tip-btn.selected{border-color:var(--blue);background:#eef4ff;color:var(--blue)}
#tip-custom{width:96px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;font:inherit}
#tip-custom:focus{outline:none;border-color:var(--blue)}

/* ============ RESPONSIVE ============ */
@media(min-width:680px){
  .field-row{grid-template-columns:1fr 1fr;gap:16px}
  .freq-grid{grid-template-columns:repeat(4,1fr)}
  .tiers{grid-template-columns:1fr 1fr}
}
@media(min-width:960px){
  .booking-wrap{grid-template-columns:1fr 360px;gap:32px}
  .booking-summary{position:sticky;top:94px}
  .booking-title{font-size:1.9rem}
}