/* ============================================================
   Melville Row — checkout page styles (Phase 2)
   Loaded only on booking.html, in addition to melville.css
   ============================================================ */

/* ---- calendar range selection (melvillerow mockup) ---- */
:root {
  --cal-bg: #ffffff;
  --cal-text: #2f2f2f;
  --cal-border: rgba(107, 100, 89, 0.18);
  --cal-accent: #a67352;
  --cal-hover: #f6f1ea;
  --cal-disabled-text: #8f877c;
  --cal-disabled-stripe-a: #f0ede8;
  --cal-disabled-stripe-b: #e5e0d9;
  --cal-booked: repeating-linear-gradient(
    45deg,
    var(--cal-disabled-stripe-a),
    var(--cal-disabled-stripe-a) 5px,
    var(--cal-disabled-stripe-b) 5px,
    var(--cal-disabled-stripe-b) 10px
  );
  --cal-booked-sm: repeating-linear-gradient(
    45deg,
    var(--cal-disabled-stripe-a),
    var(--cal-disabled-stripe-a) 2px,
    var(--cal-disabled-stripe-b) 2px,
    var(--cal-disabled-stripe-b) 4px
  );
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cal-border);
  border-radius: 2px;
  background: var(--cal-bg);
  color: var(--cal-text);
  font-size: .82rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.calendar-day:hover:not(.unavailable):not(.past):not(.empty):not(.turnover):not(.turnover-checkin):not(.turnover-dual) {
  background: var(--cal-hover);
  border-color: var(--cal-accent);
}

.calendar-day.unavailable:not(.turnover-dual) {
  background: var(--cal-booked);
  color: var(--cal-disabled-text);
  cursor: not-allowed;
  opacity: 0.85;
}

.calendar-day.turnover {
  background-image:
    linear-gradient(315deg, transparent 0 50%, var(--cal-bg) 50% 100%),
    var(--cal-booked);
  color: var(--cal-text);
  cursor: pointer;
}

.calendar-day.turnover-checkin {
  background-image:
    linear-gradient(135deg, transparent 0 50%, var(--cal-bg) 50% 100%),
    var(--cal-booked);
  color: var(--cal-text);
  cursor: pointer;
}

.calendar-day.turnover:hover,
.calendar-day.turnover-checkin:hover {
  border-color: var(--cal-accent);
}

.calendar-day.turnover:hover {
  background-image:
    linear-gradient(315deg, transparent 0 50%, var(--cal-hover) 50% 100%),
    var(--cal-booked);
}

.calendar-day.turnover-checkin:hover {
  background-image:
    linear-gradient(135deg, transparent 0 50%, var(--cal-hover) 50% 100%),
    var(--cal-booked);
}

.calendar-day.turnover-dual {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--cal-bg);
  color: var(--cal-text);
}

.calendar-day.turnover-dual::before,
.calendar-day.turnover-dual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--cal-booked);
}

.calendar-day.turnover-dual::before {
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.calendar-day.turnover-dual::after {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.calendar-day.turnover-dual .cal-day-num {
  position: relative;
  z-index: 1;
}

.calendar-day.turnover-dual:hover {
  border-color: var(--cal-accent);
  opacity: 0.92;
}

.calendar-day.turnover-hint {
  cursor: pointer;
  opacity: 1;
}

.calendar-day.turnover-hint:hover {
  border-color: var(--cal-accent);
}

.calendar-day.past {
  color: rgba(107, 100, 89, 0.35);
  cursor: not-allowed;
  border-color: transparent;
  background: transparent;
}

.calendar-day.in-range {
  background: var(--cal-accent);
  color: #fff;
  border-color: transparent;
}

.calendar-day.selected.check-in {
  background: linear-gradient(135deg, #ffffff 0 50%, var(--cal-accent) 50% 100%);
  color: var(--cal-text);
  border-color: transparent;
}

.calendar-day.selected.check-out {
  background: linear-gradient(315deg, #ffffff 0 50%, var(--cal-accent) 50% 100%);
  color: var(--cal-text);
  border-color: transparent;
}

/* Keep booked stripes on the occupied half when selecting turnover days */
.calendar-day.turnover-checkin.selected.check-in {
  background-image:
    linear-gradient(135deg, transparent 0 50%, var(--cal-accent) 50% 100%),
    var(--cal-booked);
}

.calendar-day.turnover.selected.check-out,
.calendar-day.turnover-checkin.selected.check-out {
  background-image:
    linear-gradient(315deg, transparent 0 50%, var(--cal-accent) 50% 100%),
    var(--cal-booked);
}

.calendar-day.empty {
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
}

.cal-key .k-taken i {
  background: var(--cal-booked-sm);
  border-color: var(--cal-border);
}

.cal-key .k-turn i {
  background-image:
    linear-gradient(315deg, transparent 0 50%, var(--cal-bg) 50% 100%),
    var(--cal-booked-sm);
  border-color: var(--cal-border);
}

.cal-key .k-turn-in i {
  background-image:
    linear-gradient(135deg, transparent 0 50%, var(--cal-bg) 50% 100%),
    var(--cal-booked-sm);
  border-color: var(--cal-border);
}

.cal-key .k-sel i {
  background: linear-gradient(135deg, #ffffff 0 50%, var(--cal-accent) 50% 100%);
  border-color: var(--cal-accent);
}

.checkout{max-width:1080px;margin:0 auto;padding:2.5rem 2rem 5rem}
.checkout .back{margin-bottom:1.6rem}
.checkout .back a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.checkout .back a:hover{color:var(--ink)}

.checkout-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:3rem;align-items:start}

.co-step{padding-top:2.2rem;margin-top:2.2rem;border-top:1px solid var(--hairline)}
.co-step:first-child{padding-top:0;margin-top:0;border-top:none}
.co-step h2{font-family:'Playfair Display',serif;font-weight:400;font-size:1.35rem;color:var(--ink);display:flex;align-items:center;gap:.8rem;margin-bottom:1.6rem}
.co-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--ink);border-radius:50%;font-family:'Jost',sans-serif;font-size:.8rem;color:var(--ink);flex-shrink:0}
.co-step.done h2 .co-num{background:var(--ink);color:var(--paper)}

.cal-note{margin-top:.65rem;font-size:.72rem;line-height:1.45;color:var(--cal-disabled-text)}

/* TEST ONLY — booking list under calendar (remove with TEST_BOOKING_LEGEND in checkout.js) */
.cal-test-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.4rem;margin-top:1rem;padding:1rem 1.15rem;background:#fff8e6;border:1px dashed #d4b44a;font-size:.95rem;line-height:1.5;color:#6b5a2e}
.cal-test-label{width:100%;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:1rem;margin-bottom:.35rem}
.cal-test-item{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.cal-test-item i{display:inline-block;width:1.1rem;height:1.1rem;border:1px solid rgba(0,0,0,.12);border-radius:2px;flex-shrink:0;background:var(--cal-booked-sm)}

.sel-dates{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--ink);margin-top:1.2rem}

/* payment method tabs */
.method-tabs{display:flex;gap:.6rem;margin-bottom:1.4rem;flex-wrap:wrap}
.method{font-family:'Jost',sans-serif;font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);background:none;border:1px solid var(--hairline);padding:.7rem 1.3rem;cursor:pointer;transition:all .3s var(--ease)}
.method:hover{border-color:var(--ink)}
.method.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

#payment-element{min-height:44px;padding:1.1rem;border:1px solid var(--hairline);background:#fff}

.co-terms{font-size:.74rem;color:var(--muted);margin-top:1.2rem;line-height:1.6}

/* sticky summary */
.co-aside{position:sticky;top:90px}
.co-summary{border:1px solid var(--hairline);padding:1.4rem}
.co-summary .thumb{width:100%;height:170px;object-fit:cover;background:var(--hairline);display:block;margin-bottom:1.1rem}
.co-sum-head{padding-bottom:1.1rem;border-bottom:1px solid var(--hairline);margin-bottom:1.1rem}
.co-summary .bs-name{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--ink)}
.co-summary .bs-sub{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}

.co-breakdown .bd-hint{font-size:.82rem;color:var(--muted);line-height:1.6}
.bd-row{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--ink-soft);padding:.5rem 0}
.bd-row span:last-child{color:var(--ink);white-space:nowrap}
.bd-total{border-top:1px solid var(--hairline);margin-top:.5rem;padding-top:.9rem;font-family:'Playfair Display',serif;font-size:1.15rem}
.bd-total span{color:var(--ink)!important}

@media(max-width:820px){
  .checkout-grid{grid-template-columns:1fr;gap:2.2rem}
  .co-aside{position:static;order:-1}
  .co-summary .thumb{height:200px}
}