/* ============================
   Silver Lining Retreats — Calendar & Booking UI
   ============================ */

/* ---- Theme tokens ---- */
:root{
  --slr-bg:        #f1f5f9;   /* page background */
  --slr-card-bg:   #f8fafc;   /* panel background */
  --slr-card:      #ffffff;   /* white */
  --slr-border:    #e5e7eb;
  --slr-muted:     #64748b;
  --slr-text:      #111827;
  --slr-brand:     #0ea5e9;

  --slr-booked:    #ef4444;
  --slr-pending:   #f59e0b;
  --slr-select:    #22c55e;

  --radius-lg:     14px;
  --radius-md:     12px;
}

/* ---- Page & container polish (prevents sideways scroll) ---- */
html, body { overflow-x: hidden; background: var(--slr-bg); }
.container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(14px, 2.5vw, 20px); }
.section-pad { padding-block: clamp(18px, 3.2vw, 28px); }

/* ============================
   Availability calendar
   ============================ */

.booking-wrap{
  background: var(--slr-card-bg);
  border: 1px solid var(--slr-border);
  border-radius: var(--radius-lg);
  padding: clamp(12px,2.5vw,18px);
}

/* header + legend */
.booking-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; margin-bottom:.6rem;
}
.legend{display:flex; gap:1rem; align-items:center; font-size:.9rem; color:var(--slr-text)}
.legend .dot{width:.7rem; height:.7rem; border-radius:50%; display:inline-block}
.legend .dot.booked{background:var(--slr-booked)}
.legend .dot.pending{background:var(--slr-pending)}
.legend .dot.select{background:var(--slr-select)}
#calStatus{ color: var(--slr-muted); font-size:.9rem }

/* month controls */
.cal-controls{display:flex; gap:.5rem; margin:.5rem 0 10px}
.cal-controls button{
  border:1px solid var(--slr-border); background:#fff; border-radius:8px;
  padding:.35rem .65rem; cursor:pointer;
}
.cal-controls button:focus-visible{ outline:3px solid #bae6fd; outline-offset:2px }

/* grid of months: 3×2 desktop, 2×2 tablet, 1×N mobile */
.cal-grid{ display:grid; gap:12px; }
@media (min-width:1000px){ .cal-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:640px) and (max-width:999px){ .cal-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:639px){ .cal-grid{ grid-template-columns:1fr; } }

/* month card */
.month{
  background:var(--slr-card); border:1px solid var(--slr-border);
  border-radius:var(--radius-md); overflow:hidden;
}
.mh{
  background:#f8fafc; border-bottom:1px solid var(--slr-border);
  padding:.55rem .8rem; font-weight:600; display:flex; align-items:center; justify-content:space-between;
}

/* day grid */
.days{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:.5rem;
}
.cell{
  position:relative; /* keeps corner overlays inside */
  background:#fff; border-radius:.5rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; line-height:1; aspect-ratio:1/1.05;
  cursor:pointer; user-select:none;
}
.cell.other{ color:#cbd5e1; cursor:default; }
.cell:hover{ outline:2px solid #bae6fd; }
.cell:focus-visible{ outline:3px solid #93c5fd; outline-offset:1px }

/* booked / pending / in-range */
.cell.booked{ background:rgba(239,68,68,.16); color:#991b1b; cursor:not-allowed }
.cell.pending{ background:rgba(245,158,11,.18); color:#92400e; cursor:not-allowed }
.cell.range{ background:rgba(34,197,94,.16) }

/* start/end “triangle” caps for selected range */
.cell.start::after,.cell.end::before{
  content:""; position:absolute; top:0; height:100%; width:50%;
  background:rgba(34,197,94,.25); pointer-events:none;
}
.cell.start::after{ right:0; clip-path:polygon(0 0,100% 0,100% 100%); border-top-right-radius:.5rem }
.cell.end::before{ left:0; clip-path:polygon(0 0,100% 0,0 100%); border-bottom-left-radius:.5rem }

/* ============================
   Booking form (proportional)
   ============================ */

.booking-form { display:block; }

/* First row: check-in / check-out / guests */
.booking-form .row{
  display:grid; gap:.6rem;
  grid-template-columns: 1fr 1fr 140px;
}
@media (max-width:820px){
  .booking-form .row{ grid-template-columns:1fr; }
}

/* Labels + fields */
.booking-form label{ display:grid; gap:.35rem; font-size:.92rem; color:var(--slr-text); }

/* Make ALL inputs the same visual height, including selects and dates */
.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .70rem .80rem;   /* equal internal padding */
  border: 1px solid var(--slr-border);
  border-radius: .65rem;
  min-height: 44px;         /* consistent height */
  line-height: 1.4;
  background: #fff;
  font-size: 1.1rem;        /* bump font size (~18px on most screens) */
}

/* iOS date/select alignment nits */
.booking-form input[type="date"]{ padding-block:.64rem; }
.booking-form select{ appearance:none; -webkit-appearance:none; padding-right:2rem; }

/* Actions row */
.booking-form .actions{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.6rem;
}
.btn{ border:0; border-radius:.65rem; padding:.65rem .95rem; cursor:pointer }
.btn-primary{ background:var(--slr-brand); color:#fff }
.btn-primary:hover{ filter:brightness(1.03) }

.cost{ font-weight:700; margin:.35rem 0; color:var(--slr-text) }
.msg{ margin-top:.4rem; color:var(--slr-text) }

/* Taller Notes box */
.booking-form textarea{
  min-height: 140px;                     /* increase textarea height */
  resize: vertical;
}

/* Card polish for “Ready to Book” panel if wrapped in .booking-wrap */
.booking-wrap .booking-form input,
.booking-wrap .booking-form select,
.booking-wrap .booking-form textarea{
  background:#fff;
}

/* ============================
   Utility bits
   ============================ */

/* Small helper to keep large sections centered */
.centered-section {
  background: var(--slr-card);
  border: 1px solid var(--slr-border);
  border-radius: var(--radius-lg);
  padding: clamp(12px,2.6vw,20px);
}

/* Keep images and cards from spilling horizontally */
img, svg, video { max-width:100%; height:auto; display:block }

/* Optional: soften focus outlines site-wide for keyboard users */
:focus-visible{ outline:3px solid #93c5fd; outline-offset:2px }

/* --- Booking layout tweaks (final overrides) --- */

.booking-wrap .booking-form{
  max-width: 980px;        /* keeps the row from getting too wide on large screens */
  margin-inline: auto;
}

/* First row: Check-in | Check-out | Guests */
.booking-form .row:first-of-type{
  gap: 1rem;
  grid-template-columns: minmax(240px,1fr) minmax(240px,1fr) 150px;
}

/* Uniform control height */
.booking-form input,
.booking-form select{
  height: 48px;
  line-height: normal;     /* better on iPad Safari */
  padding: 0 .9rem;
  box-sizing: border-box;
}

/* Taller notes box */
.booking-form textarea{
  min-height: 180px;
  padding: .9rem;
}

/* Responsive: guests drops below on tablet; single column on phones */
@media (max-width: 900px){
  .booking-form .row:first-of-type{ grid-template-columns: 1fr 1fr; }
  .booking-form .row:first-of-type > label:last-child{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .booking-form .row:first-of-type{ grid-template-columns: 1fr; }
}

/* End of calendar.css */