/* ============================================================
   LUXURY UNLOCKED — Booking Confirmation Voucher
   Brand stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --gold:        #C2A24E;
  --gold-deep:   #9A7B30;
  --gold-bright: #D8BC6E;
  --gold-soft:   #E8D9AE;
  --gold-wash:   #F4ECD7;

  --ink:         #23201A;
  --ink-soft:    #5A5347;
  --ink-faint:   #8A8170;

  --cream:       #EFEAE0;   /* surround */
  --paper:       #FFFFFF;
  --paper-warm:  #FBF8F2;

  --line:        #E6E0D2;
  --line-strong: #D9D0BC;

  --serif-disp:  'Cormorant Garamond', Georgia, serif;
  --serif-roman: 'Cinzel', Georgia, serif;
  --sans:        'Jost', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding:40px 0 64px;
}

/* ---------- Page sheet ---------- */
.page{
  position:relative;
  width:794px;
  min-height:1123px;
  margin:0 auto 36px;
  background:var(--paper);
  box-shadow:0 18px 50px -18px rgba(40,33,15,0.34), 0 2px 8px rgba(40,33,15,0.06);
  padding:46px 58px 40px;
  display:flex;
  flex-direction:column;
}

/* faint key watermark */
.page::after{
  content:"";
  position:absolute;
  right:-40px; bottom:-30px;
  width:300px; height:760px;
  background:url('assets/key-mark.png') no-repeat center / contain;
  opacity:.035;
  pointer-events:none;
}

/* ---------- Header ---------- */
.head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.head__logo{ height:58px; width:auto; display:block; }
.head__meta{ text-align:right; padding-top:4px; flex:0 0 auto; }
.head__kicker{
  font-family:var(--serif-roman);
  font-weight:600;
  letter-spacing:.28em;
  font-size:12px;
  color:var(--ink);
  text-transform:uppercase;
  white-space:nowrap;
}
.head__conf{ margin-top:9px; }
.head__conf-lab{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); display:block; margin-bottom:3px; font-weight:500; white-space:nowrap;
}
.head__conf-no{
  font-family:var(--sans); font-weight:500; font-size:17px;
  letter-spacing:.16em; color:var(--gold-deep);
}

.rule{ height:1px; background:var(--line-strong); margin:22px 0 0; border:0; }
.rule--gold{
  height:2px; border:0; margin:0;
  background:linear-gradient(90deg,var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
}

/* ---------- Confirmed banner ---------- */
.confirmed{
  margin-top:24px;
  text-align:center;
}
.confirmed__eyebrow{
  font-size:10.5px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:500;
}
.confirmed__title{
  font-family:var(--serif-disp);
  font-weight:500;
  font-size:46px;
  line-height:1.02;
  letter-spacing:.01em;
  margin:10px 0 0;
  color:var(--ink);
}
.confirmed__title em{ font-style:italic; color:var(--gold-deep); }
.confirmed__sub{
  font-size:12.5px; color:var(--ink-soft); margin-top:12px; letter-spacing:.02em;
}

/* ---------- Property block ---------- */
.property{
  margin-top:24px;
  display:flex;
  gap:26px;
  align-items:stretch;
}
.property__photo{
  width:228px; height:158px;
  flex:0 0 228px;
  border:1px solid var(--gold-soft);
  background:var(--gold-wash);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.property__photo-ph{
  font-family:var(--sans);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); opacity:.65;
}
.property__photo:not([data-empty]) .property__photo-ph{ display:none; }
.property__body{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.property__eyebrow{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500;
}
.property__name{
  font-family:var(--serif-disp);
  font-weight:600;
  font-size:31px;
  line-height:1.08;
  margin:8px 0 0;
  color:var(--ink);
  text-wrap:balance;
}
.property__addr{
  margin-top:12px;
  font-size:13px; line-height:1.55; color:var(--ink-soft);
  max-width:46ch;
}
.property__map{
  margin-top:14px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:500;
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none;
  border-bottom:1px solid var(--gold-soft);
  padding-bottom:3px; align-self:flex-start; white-space:nowrap;
}
.property__map svg{ width:12px; height:12px; }

/* ---------- Stay timeline ---------- */
.stay{
  margin-top:22px;
  border:1px solid var(--line);
  background:var(--paper-warm);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.stay__col{ padding:24px 22px; text-align:center; }
.stay__lab{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500;
}
.stay__date{
  font-family:var(--serif-disp); font-weight:600;
  font-size:25px; line-height:1.05; margin-top:8px; color:var(--ink); white-space:nowrap;
}
.stay__time{ font-size:11.5px; color:var(--ink-soft); margin-top:6px; letter-spacing:.04em; }
.stay__mid{
  padding:18px 22px; text-align:center;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  background:var(--gold-wash);
  align-self:stretch; display:flex; flex-direction:column; justify-content:center;
}
.stay__nights{
  font-family:var(--serif-disp); font-weight:600; font-size:30px; line-height:1;
  color:var(--gold-deep);
}
.stay__nights-lab{
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); margin-top:5px; font-weight:500;
}

/* ---------- Detail grid ---------- */
.details{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:48px;
  row-gap:0;
}
.detail{
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.detail__lab{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; margin-bottom:6px;
}
.detail__val{
  font-size:15px; color:var(--ink); line-height:1.4; font-weight:400;
}
.detail__val--lead{ font-weight:500; }
.detail--full{ grid-column:1 / -1; }

/* ---------- Section heading ---------- */
.sect{ margin-top:24px; }
.sect__title{
  font-family:var(--serif-roman);
  font-weight:600;
  font-size:13px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
  display:flex; align-items:center; gap:14px;
  margin:0 0 16px;
}
.sect__title::after{
  content:""; flex:1; height:1px; background:var(--line-strong);
}

/* ---------- Inclusions ---------- */
.incl{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.incl__item{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--ink); letter-spacing:.01em;
  background:var(--gold-wash);
  border:1px solid var(--gold-soft);
  padding:9px 15px 9px 13px;
}
.incl__item svg{ width:13px; height:13px; flex:0 0 13px; color:var(--gold-deep); }

/* ---------- Price summary ---------- */
.price{
  margin-top:22px;
  border:1px solid var(--line);
  padding:22px 26px;
  background:var(--paper-warm);
}
.price__rows{ }
.price__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  font-size:13px; color:var(--ink-soft); padding:7px 0;
}
.price__row span:first-child{ flex:1; }
.price__row span:last-child{ color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.price__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  margin-top:8px; padding-top:14px; border-top:1px solid var(--line-strong);
}
.price__total-lab{
  font-family:var(--serif-roman); font-weight:600; font-size:12.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.price__total-val{
  font-family:var(--serif-disp); font-weight:600; font-size:26px; color:var(--gold-deep);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.price__note{ font-size:10.5px; color:var(--ink-faint); margin-top:10px; letter-spacing:.02em; }

/* ---------- Note / request callout ---------- */
.note{
  border-left:2px solid var(--gold);
  background:var(--gold-wash);
  padding:16px 20px;
  font-size:13px; line-height:1.6; color:var(--ink);
}
.note + .note{ margin-top:14px; }
.note__lab{
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:6px;
}

/* ---------- Terms / policy lists ---------- */
.terms{
  columns:1;
  font-size:11.5px; line-height:1.62; color:var(--ink-soft);
}
.terms li{ margin:0 0 9px; padding-left:2px; }
.terms ol, .terms ul{ margin:0; padding-left:18px; }

.policy{ display:grid; grid-template-columns:1fr 1fr; gap:14px 36px; }
.policy__item{ }
.policy__lab{
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:5px;
}
.policy__txt{ font-size:11.5px; line-height:1.55; color:var(--ink-soft); }
.policy__full{ grid-column:1/-1; }
.cxl{ font-size:11.5px; line-height:1.62; color:var(--ink-soft); margin:0; max-width:96%; }

/* ---------- Contact panel ---------- */
.contact{
  margin-top:24px;
  background:var(--ink);
  color:#F3EEE2;
  padding:30px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  position:relative; overflow:hidden;
}
.contact::before{
  content:""; position:absolute; right:-30px; top:-40px;
  width:160px; height:420px;
  background:url('assets/key-mark.png') no-repeat center/contain;
  opacity:.07;
}
.contact__l{ position:relative; }
.contact__eyebrow{
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-bright); font-weight:500;
}
.contact__title{
  font-family:var(--serif-disp); font-weight:500; font-size:23px;
  margin:8px 0 0; color:#fff;
}
.contact__txt{ font-size:12px; line-height:1.55; color:#CFC9BB; margin-top:8px; max-width:42ch; }
.contact__r{ position:relative; text-align:right; flex:0 0 auto; }
.contact__row{ font-size:13px; color:#F3EEE2; margin:5px 0; letter-spacing:.02em; }
.contact__row b{ color:var(--gold-bright); font-weight:500; }

/* ---------- Footer ---------- */
.foot{
  margin-top:auto;
  padding-top:22px;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line);
}
/* When the payment summary is hidden, balance page 1 for printout:
   split the freed vertical space between the intro hero and the footer
   instead of dropping it all as a gap above the footer. */
.page.no-price .property{ margin-top:auto; }
.foot__brand{ display:flex; align-items:center; gap:11px; }
.foot__brand img{ height:24px; width:auto; opacity:.55; }
.foot__tag{
  font-family:var(--serif-roman); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-faint);
}
.foot__page{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}
.foot__site{ font-size:11px; color:var(--gold-deep); letter-spacing:.05em; }

/* spacing helper */
.spacer{ flex:1; }

/* ---------- Print ---------- */
@media print{
  @page{ size:A4; margin:0; }
  html, body{ background:#fff !important; padding:0; margin:0; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .page{
    width:794px; min-height:0; height:auto;
    margin:0 auto; box-shadow:none;
    overflow:hidden;
    page-break-after:always; break-after:page;
  }
  .page:last-child{ page-break-after:auto; break-after:auto; }
  .page::after{ display:none !important; }   /* decorative watermark overflows the sheet → drop it in print */
  .edit-fab, .editor, .editor-scrim, .tweaks-toggle, .tweaks-panel{ display:none !important; }
}

/* ---------- On-screen responsive fit (phones) ---------- */
@media (max-width:860px){
  body{ padding:16px 0 40px; }
  .page{ transform:scale(var(--fit,1)); transform-origin:top center; }
}