/* ============================================================
   Costa Rentals — botones de reserva, selector de huéspedes y calendario
   Compartido por la página de departamento y el buscador del home
   (static/js/apartment.js). Se carga en base.html, antes de los CSS de cada página.
   ============================================================ */

/* ---------- botones de reserva ---------- */
.booking-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;position:relative;
  min-height:48px;padding:.8rem 1.5rem;border-radius:var(--radius-pill);border:1px solid transparent;
  background:var(--petrol);color:#fff;font-size:.98rem;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .2s,box-shadow .2s,transform .2s,opacity .2s;-webkit-tap-highlight-color:transparent
}
.booking-button:hover{background:var(--petrol-dark)}
.booking-button:active{transform:scale(.985)}
.booking-button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(50,88,109,.28)}
.booking-button[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.booking-button-small{min-height:40px;padding:.5rem 1.1rem;font-size:.88rem}
.booking-button-ghost{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.booking-button-ghost:hover{background:var(--bone);border-color:var(--ink)}
.booking-button-whatsapp{background:var(--whatsapp-hover)}
.booking-button-whatsapp:hover{background:#178A45}
.booking-button.is-loading{color:transparent;pointer-events:none}
.booking-button.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:booking-spin .7s linear infinite}
@keyframes booking-spin{to{transform:rotate(360deg)}}
.link-button{background:none;border:0;padding:.2rem 0;font-size:.88rem;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-button:hover{color:var(--petrol)}
.icon-button{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s}
.icon-button:hover{background:rgba(22,37,46,.06)}
.icon-button[disabled]{opacity:.3;cursor:default;background:transparent}

/* ---------- selector de huéspedes (como la referencia: filas con − y +) ---------- */
.guest-picker{position:absolute;left:0;right:0;top:calc(100% + .5rem);z-index:40;background:#fff;border-radius:var(--radius-medium);
  padding:.4rem 1.1rem .9rem;box-shadow:var(--shadow-medium),0 0 0 1px var(--line-soft)}
.guest-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.guest-row:last-of-type{border-bottom:0}
.guest-label{display:flex;flex-direction:column}
.guest-label span{font-size:1rem;font-weight:500;color:var(--ink)}
.guest-label small{font-size:.84rem;color:var(--muted-dark)}
.guest-control{display:flex;align-items:center;gap:.7rem;border:0;margin:0;padding:0;min-width:0}
.guest-step{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  display:grid;place-items:center;font-size:1.15rem;line-height:1;cursor:pointer;transition:border-color .2s,background .2s}
.guest-step:hover:not([disabled]){border-color:var(--ink)}
.guest-step:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(50,88,109,.28)}
.guest-step[disabled]{opacity:.3;cursor:not-allowed}
.guest-count{min-width:1.6rem;text-align:center;font-size:1rem;font-variant-numeric:tabular-nums}
.guest-note{font-size:.8rem;color:var(--muted-dark);margin-top:.4rem}

/* ---------- calendario visual ---------- */
.date-picker{z-index:1300;background:#fff;color:var(--ink);display:flex;flex-direction:column}
.date-picker[hidden]{display:none}
.date-picker.is-popover{position:absolute;top:calc(100% + 8px);right:0;width:720px;border-radius:var(--radius-large);
  box-shadow:0 24px 60px -20px rgba(19,35,44,.45),0 0 0 1px var(--line-soft);padding:1.3rem 1.4rem 1rem;animation:picker-in .18s var(--ease)}
.date-picker.is-popover .date-picker-head{display:none}
.date-picker.is-sheet{position:fixed;left:0;right:0;bottom:0;max-height:92svh;border-radius:var(--radius-large) var(--radius-large) 0 0;
  box-shadow:0 -20px 60px -20px rgba(19,35,44,.45);animation:sheet-up .28s var(--ease)}
.date-picker-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem .7rem .6rem 1.1rem;border-bottom:1px solid var(--line-soft)}
.date-picker-title{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.date-picker-body{overflow-y:auto;overscroll-behavior:contain}
.date-picker.is-sheet .date-picker-body{padding:1rem 1.1rem .6rem}
.date-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line-soft);min-height:44px}
.date-picker.is-sheet .date-picker-foot{margin-top:0;padding:.8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom,0px))}
.date-picker-actions{display:flex;align-items:center;gap:1rem;flex:none}
.date-picker-actions .link-button{white-space:nowrap}
.date-picker-backdrop{position:fixed;inset:0;z-index:1250;background:rgba(19,35,44,.45);animation:fade-in .2s}
.date-picker-backdrop[hidden]{display:none}
@keyframes picker-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

.calendar{position:relative;user-select:none;-webkit-user-select:none}
.calendar-nav{position:absolute;left:-.4rem;right:-.4rem;top:-.35rem;display:flex;justify-content:space-between;pointer-events:none;z-index:2}
.calendar-nav .icon-button{pointer-events:auto}
.calendar-months{display:grid;gap:2.4rem}
.calendar-months.two-months{grid-template-columns:1fr 1fr}
.calendar-title{font-size:.98rem;font-weight:600;text-align:center;letter-spacing:-.01em;line-height:32px;margin-bottom:.6rem}
.calendar-title::first-letter{text-transform:uppercase}
.calendar-grid{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed}
.calendar-weekday{font-size:.72rem;font-weight:500;color:var(--muted-dark);text-align:center;line-height:28px;padding-bottom:.2rem}
.calendar-weekday abbr{text-decoration:none}
.calendar-cell{position:relative;height:46px;padding:1px 0;vertical-align:middle}
.calendar-day{
  position:relative;z-index:0;width:100%;height:44px;border:0;background:transparent;border-radius:var(--radius-pill);
  font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums
}
.calendar-day::before{content:"";position:absolute;z-index:-1;inset:0;margin:auto;width:44px;height:44px;max-width:100%;border-radius:50%;transition:background .12s,box-shadow .12s}
.calendar-day:not(.is-disabled):hover::before{box-shadow:inset 0 0 0 1.5px var(--ink)}
.calendar-day:focus-visible{outline:none}
.calendar-day:focus-visible::before{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--petrol)}
.calendar-day.is-today::after{content:"";position:absolute;bottom:7px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor;opacity:.6}
.calendar-day.is-disabled{color:rgba(22,37,46,.28);cursor:default}
.calendar-day.in-range{background:var(--range);border-radius:0}
.calendar-day.is-start.has-range{background:linear-gradient(90deg,transparent 50%,var(--range) 50%);border-radius:0}
.calendar-day.is-end{background:linear-gradient(90deg,var(--range) 50%,transparent 50%);border-radius:0}
.calendar-day.is-start,.calendar-day.is-end{color:#fff}
.calendar-day.is-start::before,.calendar-day.is-end::before{background:var(--petrol)}
.calendar-status{font-size:.86rem;color:var(--muted-dark)}
.calendar-day.is-occupied{text-decoration:line-through}  /* noche ocupada (como la referencia) */
/* salida antes de la estancia mínima: atenuada, sin tachar, y explica la regla al tocarla */
.calendar-day.is-min-stay{cursor:help;color:rgba(22,37,46,.4)}
.calendar-day.is-min-stay::before{box-shadow:inset 0 0 0 1px rgba(22,37,46,.12)}
.calendar-min-stay{display:inline-flex;align-items:center;gap:.4rem;margin:0 auto 1rem;padding:.4rem .9rem;border-radius:var(--radius-pill);
  background:var(--range);color:var(--ink);font-size:.86rem;font-weight:600}
.calendar-min-stay[hidden]{display:none}
.date-picker-body{text-align:center}
.date-picker-body .calendar{text-align:left}
.calendar-min-stay.is-flash{animation:min-stay-flash .9s var(--ease)}
@keyframes min-stay-flash{0%,100%{transform:none}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}30%{background:#F6E7C8}}

@media (max-width:1080px){
  .date-picker.is-popover{width:680px}
}
@media (max-width:820px){
  .calendar-months{gap:1rem}
  .calendar-nav{top:-.3rem}
  .calendar-cell{height:calc(min(100vw - 2.2rem, 460px) / 7 + 2px);max-height:54px;min-height:44px}
  .calendar-day{height:100%}
  .calendar-day::before{width:min(46px,100%);height:min(46px,100%)}
}
@media print{
  .date-picker,.date-picker-backdrop{display:none!important}
}