*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: #fdfdf8;
  color: #1a1a1a;
  font-weight: 300;
}
        /* ── NAV ── */
        nav { position: fixed; width: 100%; top: 0; z-index: 100; background: rgba(253,253,248,.96); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,.07); }
        .nav-in { max-width: 1100px; margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }

        /* ── LAYOUT ── */
        .page-wrap { max-width: 1100px; margin: 0 auto; padding: 7rem 2rem 4rem; }
        .two-col { display: grid; grid-template-columns: 1fr 380px; gap: 4rem; align-items: start; }

        /* ── TYPE ── */
        .serif { font-family: 'Cormorant Garamond', serif; }
        .lbl { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }

        /* ── CALENDAR ── */
        .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
        .cal-nav { background: none; border: 1px solid rgba(0,0,0,.1); width: 36px; height: 36px; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all .2s; }
        .cal-nav:hover { background: #577D59; color: #fff; border-color: #577D59; }
        .cal-month { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 400; }
        .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
        .cal-day-name { text-align: center; font-size: .65rem; font-weight: 600; letter-spacing: .1em; color: #999; padding: .5rem 0; text-transform: uppercase; }
        .cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border: 1px solid transparent; transition: all .25s; position: relative; font-size: .9rem; border-radius: 2px; }
        .cal-day:hover:not(.unavailable):not(.past):not(.empty) { border-color: #577D59; background: rgba(87,125,89,.06); }
        .cal-day.selected { background: #577D59; color: #fff; border-color: #577D59; }
        .cal-day.unavailable { background: rgba(229,62,62,.06); color: #ccc; cursor: not-allowed; }
        .cal-day.sold-out { background: rgba(229,62,62,.06); color: #bbb; cursor: not-allowed; }
        .cal-day.past { color: #ccc; cursor: not-allowed; }
        .cal-day.empty { cursor: default; }
        .cal-day.today { font-weight: 600; }
        .cal-day.today::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; background: #577D59; border-radius: 50%; }
        .cal-day.selected::after { background: #fff; }
        .avail-dot { font-size: .5rem; color: #577D59; position: absolute; top: 3px; right: 4px; }
        .sold-out .avail-dot { color: #e53e3e; }
        .cal-legend { display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; }
        .legend-item { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: #888; }
        .legend-dot { width: 10px; height: 10px; border-radius: 1px; }

        /* ── AVAILABILITY BAR ── */
        .avail-bar { background: rgba(87,125,89,.06); border: 1px solid rgba(87,125,89,.15); padding: 1rem 1.25rem; margin-top: 1.5rem; display: flex; align-items: center; gap: .75rem; }
        .avail-ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
        .avail-bar.full .avail-ico { background: rgba(229,62,62,.1); }
        .avail-bar.few .avail-ico { background: rgba(237,137,54,.1); }
        .avail-bar.open .avail-ico { background: rgba(87,125,89,.12); }

        /* ── BOOKING CARD ── */
        .booking-card { background: #fff; border: 1px solid rgba(0,0,0,.08); position: sticky; top: 6rem; }
        .booking-head { background: #1a3d2d; padding: 1.75rem; }
        .booking-body { padding: 1.75rem; }
        .price-display { font-family: 'Cormorant Garamond', serif; font-size: 3rem; font-weight: 300; color: #fff; line-height: 1; }
        .price-sub { color: rgba(255,255,255,.55); font-size: .8rem; margin-top: .25rem; }

        /* ── FORM FIELDS ── */
        .field { margin-bottom: 1.25rem; }
        .field label { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #666; margin-bottom: .4rem; }
        .field input, .field select { width: 100%; padding: .75rem 1rem; border: 1px solid rgba(0,0,0,.12); background: #fafafa; font-family: 'Inter', sans-serif; font-weight: 300; font-size: .9rem; outline: none; transition: border-color .3s; border-radius: 1px; }
        .field input:focus, .field select:focus { border-color: #577D59; background: #fff; box-shadow: 0 0 0 3px rgba(87,125,89,.07); }
        .qty-row { display: flex; align-items: center; gap: .75rem; }
        .qty-btn { width: 36px; height: 36px; border: 1px solid rgba(0,0,0,.12); background: #fff; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
        .qty-btn:hover { background: #577D59; color: #fff; border-color: #577D59; }
        .qty-val { font-size: 1.1rem; font-weight: 500; min-width: 30px; text-align: center; }

        /* ── ORDER SUMMARY ── */
        .order-line { display: flex; justify-content: space-between; font-size: .875rem; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.05); }
        .order-line:last-child { border-bottom: none; }
        .order-total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 600; padding-top: .875rem; border-top: 2px solid rgba(0,0,0,.08); margin-top: .5rem; }

        /* ── BUTTONS ── */
        .btn-pay { width: 100%; padding: 1rem; background: #577D59; color: #fff; border: none; font-family: 'Inter', sans-serif; font-size: .875rem; font-weight: 500; letter-spacing: .06em; cursor: pointer; transition: all .3s; margin-top: 1.25rem; }
        .btn-pay:hover:not(:disabled) { background: #456346; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(87,125,89,.3); }
        .btn-pay:disabled { opacity: .5; cursor: not-allowed; transform: none; }
        .btn-secondary { width: 100%; padding: .75rem; background: transparent; color: #577D59; border: 1px solid rgba(87,125,89,.3); font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 500; cursor: pointer; transition: all .3s; margin-top: .75rem; }
        .btn-secondary:hover { background: rgba(87,125,89,.05); }

        /* ── SUCCESS STATE ── */
        .success-box { display: none; text-align: center; padding: 3rem 2rem; }
        .success-box.show { display: block; }
        .success-ico { width: 72px; height: 72px; background: rgba(87,125,89,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem; }

        /* ── STATES ── */
        .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: .5rem; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .error-msg { color: #e53e3e; font-size: .8rem; margin-top: .5rem; display: none; }

        /* ── TRUST BADGES ── */
        .trust { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
        .trust-item { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: #888; }

        /* ── INFO SECTION ── */
        .info-box { background: #fff; border: 1px solid rgba(0,0,0,.07); padding: 1.5rem; margin-bottom: 1.5rem; }
        .info-row { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .875rem; }
        .info-row:last-child { margin-bottom: 0; }
        .info-ico { width: 28px; height: 28px; background: rgba(87,125,89,.08); border: 1px solid rgba(87,125,89,.12); display: flex; align-items: center; justify-content: center; font-size: .75rem; flex-shrink: 0; margin-top: .05rem; }

        /* ── RESPONSIVE ── */
        @media (max-width: 768px) {
            .two-col { grid-template-columns: 1fr; gap: 2rem; }
            .booking-card { position: static; }
        }