/* ============================================================
   BOOKING WIDGET — Estilo Amelia
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  --bk-blue:      #1a6fa0;
  --bk-blue2:     #1588c0;
  --bk-blue-pale: #e8f4fb;
  --bk-navy:      #0d2d45;
  --bk-green:     #22c55e;
  --bk-green-pale:#dcfce7;
  --bk-red:       #ef4444;
  --bk-red-pale:  #fee2e2;
  --bk-gray:      #f8fafc;
  --bk-border:    #e2e8f0;
  --bk-text:      #1e293b;
  --bk-muted:     #64748b;
  --bk-radius:    14px;
  --bk-shadow:    0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --bk-shadow-lg: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
}

/* ── Contenedor principal ─────────────────────────────────── */
.bk-widget {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--bk-text);
  max-width: 960px;
  margin: 0 auto;
  background: #ffffff;
  position: relative;
  z-index: 1;
  border-radius: 12px;
  padding-bottom: 20px;
  overflow: hidden;
}

/* ── Progress bar ─────────────────────────────────────────── */
.bk-progress {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
}
.bk-step-item {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  max-width: 200px;
}
.bk-step-item:last-child { flex: 0; }
.bk-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
  border: 2px solid var(--bk-border);
  background: #fff;
  color: var(--bk-muted);
  transition: all .3s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.bk-step-dot.active {
  background: var(--bk-blue);
  border-color: var(--bk-blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(26,111,160,.15);
}
.bk-step-dot.done {
  background: var(--bk-green);
  border-color: var(--bk-green);
  color: #fff;
}
.bk-step-dot.done::after {
  content: '✓';
  font-size: 14px;
}
.bk-step-label {
  font-size: 11px; font-weight: 600;
  color: var(--bk-muted); margin-top: 6px;
  text-align: center; letter-spacing: .3px;
  white-space: nowrap;
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
}
.bk-step-dot-wrap {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
}
.bk-step-line {
  flex: 1; height: 2px;
  background: var(--bk-border);
  margin: 0 6px;
  transition: background .3s ease;
  border-radius: 2px;
}
.bk-step-line.done { background: var(--bk-green); }
.bk-step-line.active { background: var(--bk-blue); }

/* ── Layout del wizard ────────────────────────────────────── */
.bk-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
  background: transparent;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .bk-layout { grid-template-columns: 1fr; }
  .bk-summary { order: -1; }
}

/* ── Panel principal ─────────────────────────────────────── */
.bk-panel {
  background: #fff;
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
  border: 1px solid var(--bk-border);
  overflow: hidden;
}
.bk-panel-head {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--bk-border);
  background: var(--bk-gray);
}
.bk-panel-head h3 {
  font-size: 18px; font-weight: 600;
  color: var(--bk-text); margin-bottom: 4px;
}
.bk-panel-head p {
  font-size: 13px; color: var(--bk-muted);
}
.bk-panel-body {
  padding: 28px;
  background: #ffffff;
  position: relative;
}

/* ── Animación entre pasos ────────────────────────────────── */
.bk-step { display: none; }
.bk-step.active { display: block; background: #ffffff; }
@keyframes bkFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tarjetas de apartamento ──────────────────────────────── */
.bk-apt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.bk-apt-card {
  border: 2px solid var(--bk-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
}
.bk-apt-card:hover {
  border-color: var(--bk-blue);
  box-shadow: 0 4px 16px rgba(26,111,160,.12);
  transform: translateY(-2px);
}
.bk-apt-card.selected {
  border-color: var(--bk-blue);
  box-shadow: 0 0 0 3px rgba(26,111,160,.2);
}
.bk-apt-card.selected .bk-apt-check { opacity: 1; }
.bk-apt-img {
  height: 120px; overflow: hidden;
  background: linear-gradient(135deg, #e8f4fb, #dbeafe);
}
.bk-apt-img img { width:100%; height:100%; object-fit:cover; }
.bk-apt-placeholder {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, #e8f4fb, #dbeafe);
}
.bk-apt-body { padding: 12px 14px; }
.bk-apt-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.bk-apt-meta { font-size: 12px; color: var(--bk-muted); }
.bk-apt-check {
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bk-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  opacity: 0; transition: opacity .2s;
  box-shadow: 0 2px 8px rgba(26,111,160,.4);
}

/* ── Selector de huéspedes ────────────────────────────────── */
.bk-guests-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--bk-border);
}
.bk-guests-row:last-child { border: none; }
.bk-guests-label strong { font-size: 15px; font-weight: 600; display: block; }
.bk-guests-label span { font-size: 12px; color: var(--bk-muted); }
.bk-counter {
  display: flex; align-items: center; gap: 0;
}
.bk-counter-btn {
  width: 36px; height: 36px;
  border: 1.5px solid var(--bk-border);
  background: #fff; color: var(--bk-text);
  font-size: 18px; line-height: 1;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  font-weight: 300;
}
.bk-counter-btn:hover:not(:disabled) {
  border-color: var(--bk-blue); color: var(--bk-blue);
  background: var(--bk-blue-pale);
}
.bk-counter-btn:disabled { opacity: .35; cursor: not-allowed; }
.bk-counter-val {
  width: 40px; text-align: center;
  font-size: 16px; font-weight: 700; color: var(--bk-text);
}

/* ── Calendario visual ────────────────────────────────────── */
.bk-calendar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.bk-cal-nav {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1.5px solid var(--bk-border); background: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--bk-muted);
  transition: all .15s;
}
.bk-cal-nav:hover { border-color: var(--bk-blue); color: var(--bk-blue); }
.bk-cal-title {
  font-size: 15px; font-weight: 700; color: var(--bk-text);
  text-transform: capitalize;
}
.bk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.bk-cal-day-name {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--bk-muted); padding: 4px 0 8px;
  text-transform: uppercase; letter-spacing: .5px;
}
.bk-cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s; position: relative;
  border: 1.5px solid transparent;
}
.bk-cal-day:hover:not(.disabled):not(.occupied) {
  background: var(--bk-blue-pale);
  border-color: var(--bk-blue);
  color: var(--bk-blue);
}
.bk-cal-day.today {
  font-weight: 700; color: var(--bk-blue);
}
.bk-cal-day.disabled {
  color: #d1d5db; cursor: not-allowed;
}
.bk-cal-day.occupied {
  background: #fee2e2; color: #dc2626;
  cursor: not-allowed; text-decoration: line-through;
  font-weight: 600;
}
.bk-cal-day.in-range {
  background: var(--bk-blue-pale);
  border-radius: 0; border-color: transparent;
  color: var(--bk-blue);
}
.bk-cal-day.range-start, .bk-cal-day.range-end {
  background: var(--bk-blue);
  color: #fff; font-weight: 700;
  border-color: var(--bk-blue);
  border-radius: 8px;
  z-index: 1;
}
.bk-cal-day.range-start { border-radius: 8px 0 0 8px; }
.bk-cal-day.range-end   { border-radius: 0 8px 8px 0; }
.bk-cal-day.range-start.range-end { border-radius: 8px; }

.bk-cal-legend {
  display: flex; gap: 16px; margin-top: 14px; flex-wrap: wrap;
}
.bk-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--bk-muted);
}
.bk-legend-dot {
  width: 12px; height: 12px; border-radius: 3px;
}

/* ── Fechas seleccionadas badge ───────────────────────────── */
.bk-dates-selected {
  display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap;
}
.bk-date-badge {
  background: var(--bk-gray); border: 1.5px solid var(--bk-border);
  border-radius: 10px; padding: 10px 16px;
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 130px;
}
.bk-date-badge.filled {
  background: var(--bk-blue-pale);
  border-color: var(--bk-blue);
}
.bk-date-badge-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--bk-muted);
}
.bk-date-badge.filled .bk-date-badge-label { color: var(--bk-blue); }
.bk-date-badge-val {
  font-size: 15px; font-weight: 700; color: var(--bk-text);
}

/* ── Formulario de datos ──────────────────────────────────── */
.bk-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) { .bk-form-grid { grid-template-columns: 1fr; } }

.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-field label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--bk-muted);
}
.bk-field input, .bk-field select, .bk-field textarea {
  padding: 12px 14px; font-size: 15px;
  border: 1.5px solid var(--bk-border);
  border-radius: 10px; background: var(--bk-gray);
  color: var(--bk-text); font-family: inherit;
  outline: none; transition: all .15s;
}
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus {
  border-color: var(--bk-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26,111,160,.1);
}
.bk-field input.error, .bk-field select.error {
  border-color: var(--bk-red);
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.bk-field .field-error {
  font-size: 12px; color: var(--bk-red); font-weight: 500;
}
.bk-field-full { grid-column: span 2; }

/* ── Botones de navegación ────────────────────────────────── */
.bk-nav-btns {
  display: flex; justify-content: space-between;
  align-items: center; margin-top: 28px; gap: 12px;
}
.bk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 50px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; border: none; transition: all .2s;
  letter-spacing: .2px;
}
.bk-btn-primary {
  background: var(--bk-blue); color: #fff;
  box-shadow: 0 4px 14px rgba(26,111,160,.3);
}
.bk-btn-primary:hover {
  background: var(--bk-blue2);
  box-shadow: 0 6px 20px rgba(26,111,160,.4);
  transform: translateY(-1px);
}
.bk-btn-primary:disabled {
  opacity: .5; cursor: not-allowed; transform: none;
  box-shadow: none;
}
.bk-btn-ghost {
  background: transparent; color: var(--bk-muted);
  border: 1.5px solid var(--bk-border);
}
.bk-btn-ghost:hover { border-color: var(--bk-blue); color: var(--bk-blue); }
.bk-btn-full { width: 100%; justify-content: center; }

/* ── Panel de resumen (sidebar) ───────────────────────────── */
.bk-summary {
  background: #fff;
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
  border: 1px solid var(--bk-border);
  overflow: hidden;
  position: sticky; top: 90px;
}
.bk-summary-head {
  padding: 18px 20px;
  background: var(--bk-navy);
  color: #fff;
}
.bk-summary-head h4 {
  font-size: 14px; font-weight: 600; margin-bottom: 2px;
}
.bk-summary-head p { font-size: 12px; color: rgba(255,255,255,.6); }
.bk-summary-body { padding: 16px 20px; }
.bk-summary-item {
  display: flex; justify-content: space-between;
  align-items: flex-start; padding: 8px 0;
  border-bottom: 1px solid var(--bk-border);
  font-size: 13px; gap: 8px;
}
.bk-summary-item:last-child { border: none; }
.bk-summary-item .lbl { color: var(--bk-muted); }
.bk-summary-item .val { font-weight: 600; color: var(--bk-text); text-align: right; }
.bk-summary-total {
  background: var(--bk-blue-pale);
  border-radius: 10px; padding: 14px 16px;
  margin-top: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.bk-summary-total .lbl { font-size: 13px; font-weight: 700; color: var(--bk-blue); }
.bk-summary-total .val { font-size: 22px; font-weight: 800; color: var(--bk-blue); }
.bk-summary-empty {
  padding: 20px 0; text-align: center;
  color: var(--bk-muted); font-size: 13px; line-height: 1.7;
}
.bk-summary-apt-img {
  width: 100%; height: 120px; object-fit: cover;
}
.bk-summary-apt-placeholder {
  height: 80px; background: linear-gradient(135deg,#e8f4fb,#dbeafe);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}

/* ── Alert / error ────────────────────────────────────────── */
.bk-alert {
  padding: 12px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 500; margin-bottom: 16px;
  display: flex; align-items: flex-start; gap: 8px;
}
.bk-alert-error   { background: var(--bk-red-pale);   color: #991b1b; border: 1px solid #fecaca; }
.bk-alert-success { background: var(--bk-green-pale);  color: #166534; border: 1px solid #bbf7d0; }
.bk-alert-info    { background: var(--bk-blue-pale);   color: #1e40af; border: 1px solid #bfdbfe; }

/* ── Confirmación final ───────────────────────────────────── */
.bk-confirm {
  text-align: center; padding: 20px 10px;
}
.bk-confirm-icon {
  width: 72px; height: 72px; background: var(--bk-green-pale);
  border-radius: 50%; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.bk-confirm h3 {
  font-size: 22px; font-weight: 700; color: var(--bk-text);
  margin-bottom: 8px;
}
.bk-confirm p { font-size: 14px; color: var(--bk-muted); line-height: 1.7; margin-bottom: 20px; }
.bk-confirm-code {
  display: inline-block; background: var(--bk-blue-pale);
  color: var(--bk-blue); font-size: 22px; font-weight: 800;
  letter-spacing: 4px; padding: 12px 24px;
  border-radius: 12px; margin: 8px 0 20px;
  border: 2px solid rgba(26,111,160,.2);
}

/* ── Spinner ──────────────────────────────────────────────── */
.bk-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%;
  animation: bkSpin .7s linear infinite; display: inline-block;
}
@keyframes bkSpin { to { transform: rotate(360deg); } }

/* ── Disponibilidad inline ────────────────────────────────── */
.bk-avail-checking {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--bk-muted); padding: 8px 0;
}
.bk-avail-dot {
  width: 8px; height: 8px; border-radius: 50%;
  animation: bkPulse 1.2s ease-in-out infinite;
}
.bk-avail-dot.ok  { background: var(--bk-green); animation: none; }
.bk-avail-dot.err { background: var(--bk-red);   animation: none; }
@keyframes bkPulse {
  0%,100% { opacity: .4; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.2); }
}

/* ── Privacy note ─────────────────────────────────────────── */
.bk-privacy {
  font-size: 11px; color: var(--bk-muted);
  line-height: 1.6; margin-top: 12px; text-align: center;
}
.bk-privacy a { color: var(--bk-blue); }