/* Bulgarian Villas — premium booking surface (task t_7b6d15dd).
   Loaded AFTER lux.css on every page. Covers the three surfaces where a guest
   stops browsing and starts committing: the booking form step (modal on the
   villa page), the guest portal, and the post-booking confirmation.
   Visual layer only — no framework, no new dependencies, plain forest+brass
   tokens from lux.css. The checkout page carries its own copy of this
   language in checkout.css because it renders on the plain site layout. */

/* ---------------------------------------------------------------- 1. steps */
/* A 1-2-3 progress rail: the guest must see how short the road is. Done steps
   stay quiet (no brass), the current step is the only loud thing, the last
   step is dimmed until it is reachable. */
.psteps{
  display:flex;align-items:center;gap:.35rem;
  margin:0 0 var(--s4);padding:0;list-style:none;
  font-size:.72rem;letter-spacing:.02em;
}
.psteps .pstep{
  display:flex;align-items:center;gap:.4rem;min-width:0;
  color:var(--ink-3);white-space:nowrap;
}
.psteps .pstep .n{
  flex:0 0 auto;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);
  font-size:.68rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.psteps .pstep .lb{overflow:hidden;text-overflow:ellipsis}
.psteps .pstep[aria-current="step"]{color:var(--ink);font-weight:600}
.psteps .pstep[aria-current="step"] .n{background:var(--ink);border-color:var(--ink);color:#fff}
.psteps .pstep.is-done{color:var(--ink-2)}
.psteps .pstep.is-done .n{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
.psteps .pstep.is-done .n::before{
  content:"";width:9px;height:5px;border-left:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;transform:rotate(-45deg) translate(1px,-1px);
}
.psteps .pstep.is-done .n{font-size:0}
.psteps .bar{flex:1 1 10px;height:1px;background:var(--line);min-width:8px}
.psteps .bar.is-done{background:var(--accent-2);opacity:.55}
@media (max-width:520px){
  .psteps{font-size:.66rem;gap:.25rem}
  .psteps .pstep .lb{max-width:6.5em}
}

/* ------------------------------------------------------------ 2. the form */
/* Roomy: 1 label + 1 field per line group, 19px horizontal padding, 48px
   fields, and generous vertical air between groups. A form that asks for a
   passport must not look like a spreadsheet. */
.portalform{max-width:none;gap:0}
.portalform h2{
  font-size:1.05rem;letter-spacing:.01em;margin:0 0 var(--s2);
}
.pform .fgroup{padding:0 0 var(--s4);margin:0 0 var(--s4);border-bottom:1px solid var(--line-2)}
.pform .fgroup:last-of-type{border-bottom:0;margin-bottom:var(--s3)}
.pform .fghead{
  display:flex;align-items:baseline;gap:.5rem;margin:0 0 var(--s3);
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.pform .fghead .hint{letter-spacing:0;text-transform:none;color:var(--ink-3);font-size:.75rem}
.portalform label{
  font-size:.72rem;letter-spacing:.07em;color:var(--ink-3);gap:.3rem;
  margin-bottom:var(--s3);
}
.portalform label:last-child{margin-bottom:0}
.portalform input,
.portalform select,
.pform textarea{
  font:inherit;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink);
  min-height:48px;padding:.7rem .85rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card);
  transition:border-color var(--t-micro),box-shadow var(--t-micro);
}
.pform textarea{min-height:auto;padding:.65rem .85rem;resize:vertical}
.portalform input:hover,
.portalform select:hover{border-color:#CFC8BA}
.portalform input:focus,
.portalform select:focus,
.pform textarea:focus{
  outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(18,47,42,.10);
}
.portalform input:user-invalid,
.portalform select:user-invalid{border-color:var(--err);box-shadow:0 0 0 3px rgba(163,36,28,.10)}
.portalform .row2{gap:var(--s3)}

/* ------------------------------------------------- 3. registration sub-form */
/* Passport data is the bureaucratic part, so it drops out of the main rhythm
   into a soft card: accent rule on the left, own heading, smaller type. It
   reads as "add this, it takes a minute" instead of a wall of fields. */
.regbox{
  margin:0 0 var(--s4);  padding:var(--s4) var(--s4) var(--s2);
  background:linear-gradient(180deg,rgba(240,237,228,.55),rgba(240,237,228,.22));
  border:1px solid var(--line);border-left:3px solid var(--accent-2);
  border-radius:var(--r-md);
}
.regbox legend{
  padding:0 .45rem;margin-left:-.2rem;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
  background:none;
}
.regbox .muted.small{margin:0 0 var(--s3);font-size:.78rem;line-height:1.5}
.regbox label{font-size:.7rem;margin-bottom:var(--s2)}
.regbox input,.regbox select{min-height:44px;font-size:.9rem;background:var(--card)}

/* ------------------------------------------------------------- 4. trust row */
.ptrust{
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:var(--s3) 0 0;
  padding:0;list-style:none;font-size:.75rem;color:var(--ink-2);line-height:1.45;
}
.ptrust li{display:flex;gap:.35rem;align-items:flex-start;min-width:0}
.ptrust li::before{
  content:"";flex:0 0 auto;width:12px;height:7px;margin-top:.42em;
  border-left:1.7px solid var(--ok);border-bottom:1.7px solid var(--ok);
  transform:rotate(-45deg);
}

/* --------------------------------------------- 5. sticky price + submit bar */
/* Mobile only: the total and the button follow the thumb while the guest
   scrolls a long form, so nobody reaches the submit without seeing the price
   once more. Desktop keeps the static flow. */
.bsticky{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s3);
}
.bsticky .sum{display:flex;flex-direction:column;line-height:1.2}
.bsticky .sum .k{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bsticky .sum strong{font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bsticky .sum .dep{font-size:.72rem;color:var(--ink-3)}
.bsticky .btn{flex:1 1 12rem;min-height:50px}
@media (max-width:719px){
  .bsticky{
    position:sticky;bottom:-1px;z-index:3;
    margin:var(--s3) calc(-1 * var(--s5)) calc(-1 * var(--s5));
    padding:var(--s3) var(--s5) calc(var(--s3) + 2px);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(18,47,42,.08);
  }
}

/* --------------------------------------------------------- 6. confirmation */
/* The emotional peak of the funnel: warm, calm, one huge reference the guest
   can copy, then exactly three next steps. No confetti, no colour noise. */
.done{
  margin:0 calc(-1 * var(--s5)) calc(-1 * var(--s5));
  padding:var(--s6) var(--s5) var(--s5);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:radial-gradient(120% 90% at 50% 0%,rgba(29,107,79,.10),rgba(29,107,79,0) 62%);
  text-align:center;
}
.done .seal{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto var(--s3);
  border-radius:50%;background:var(--ok);color:#fff;font-size:1.4rem;line-height:1;
  box-shadow:0 6px 18px rgba(29,107,79,.28);
}
.done h2{margin:0 0 var(--s2);font-size:1.4rem;letter-spacing:-.02em}
.done .lede{margin:0 auto var(--s4);max-width:34ch;color:var(--ink-2);font-size:.92rem}
.done .refbox{
  margin:0 auto var(--s4);max-width:22rem;padding:var(--s4);
  border:1px dashed var(--accent-2);border-radius:var(--r-md);background:rgba(255,255,255,.7);
}
.done .refbox .k{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.done .refbox strong{
  display:block;margin-top:.2rem;font-size:1.85rem;line-height:1.1;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;word-break:break-all;
}
.done .next{
  margin:0 auto var(--s4);max-width:30rem;padding:0;list-style:none;text-align:left;
  counter-reset:nx;
}
.done .next li{
  counter-increment:nx;position:relative;display:flex;gap:.7rem;
  padding:.55rem .7rem;border-radius:var(--r-sm);font-size:.88rem;color:var(--ink-2);
}
.done .next li::before{
  content:counter(nx);flex:0 0 auto;display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;background:var(--accent-soft);
  color:var(--ink);font-size:.7rem;font-weight:700;
}
.done .next li+li{margin-top:.15rem}
.done h3{margin:var(--s4) 0 var(--s2);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left}
.done .bankbox{margin:0 0 var(--s3);text-align:left;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);background:var(--card)}
.done .bankbox h3{margin-top:0}
.done .bankbox .bl{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;font-size:.85rem;border-bottom:1px solid var(--line-2)}
.done .bankbox .bl:last-of-type{border-bottom:0}
.done .btn{margin-bottom:.4rem}
.done .btn.ghost{border:1px solid var(--line);background:transparent}
@media (min-width:720px){
  .done{margin:0 0 var(--s4);padding:var(--s5);border-radius:var(--r-md);border:1px solid var(--line)}
}

/* ------------------------------------------------------------ 7. guest portal */
/* One card holds the stay: reference, dates, status chip, money. The chip is
   the only coloured element and it is spelled out — colour alone never
   carries the status. Actions sit under the card, full-width on mobile. */
.pcard{
  margin:0 0 var(--s4);padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  box-shadow:var(--shadow-sm);
  border-top:3px solid var(--line);
}
.pcard[data-status="confirmed"]{border-top-color:var(--ok)}
.pcard[data-status="paid"]{border-top-color:var(--ok)}
.pcard[data-status="arrived"]{border-top-color:var(--accent-2)}
.pcard[data-status="held"],.pcard[data-status="inquiry"]{border-top-color:var(--warn)}
.pcard[data-status="cancelled"],.pcard[data-status="no_show"]{border-top-color:var(--err)}
.pcard[data-status="stayed"]{border-top-color:var(--ink-3)}
.pcard .phead{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem .75rem;margin:0 0 var(--s2)}
.pcard .phead h2{margin:0;font-size:1.15rem;flex:1 1 12rem;min-width:0}
.pcard .pref{
  font-size:.78rem;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink-3);
  text-transform:uppercase;
}
.pcard .pdates{margin:0 0 var(--s3);color:var(--ink-2);font-size:.92rem}
.pstatus{
  display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;
  padding:.25rem .6rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:600;
  letter-spacing:.03em;background:var(--accent-soft);color:var(--ink);
}
.pstatus::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pstatus[data-status="confirmed"],
.pstatus[data-status="paid"]{background:rgba(29,107,79,.12);color:#175440}
.pstatus[data-status="arrived"]{background:rgba(168,131,79,.16);color:#6D5330}
.pstatus[data-status="held"],
.pstatus[data-status="inquiry"]{background:rgba(154,91,0,.12);color:var(--warn)}
.pstatus[data-status="cancelled"],
.pstatus[data-status="no_show"]{background:rgba(163,36,28,.10);color:var(--err)}
.pstatus[data-status="stayed"]{background:rgba(94,107,102,.14);color:var(--ink-2)}

.pact{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s4)}
.pact .btn,
.pact .ghost{
  flex:1 1 12rem;min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  text-align:center;border-radius:var(--r-sm);
}
.pact .ghost{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-size:.9rem;font-weight:600;padding:.6rem 1rem;cursor:pointer;
}
.pact .ghost:hover{border-color:var(--ink);background:var(--accent-soft)}
.pact .ghost.quiet{flex:0 1 auto;color:var(--ink-2)}
@media (max-width:520px){.pact .btn,.pact .ghost{flex:1 1 100%}}

/* IBAN block: an instruction, not a form. Monospaced value, copy button,
   quiet framing so it never competes with the pay button above it. */
.ibanbox{
  margin:0 0 var(--s4);padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--accent-soft);
}
.ibanbox h2{font-size:.95rem;margin:0 0 var(--s2)}
.ibanbox .bl{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.35rem 0;border-bottom:1px solid rgba(18,47,42,.08);font-size:.85rem}
.ibanbox .bl:last-of-type{border-bottom:0}
.ibanbox .bl>span:first-child{color:var(--ink-3);font-size:.75rem}
.ibanbox .ibl{
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  font-size:.9rem;letter-spacing:.06em;word-break:break-all;text-align:right;
}
.ibanbox .copy{
  margin-top:var(--s2);display:inline-flex;align-items:center;gap:.4rem;
  min-height:40px;padding:.35rem .8rem;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--card);font-size:.78rem;
  color:var(--ink-2);cursor:pointer;
}
.ibanbox .copy:hover{border-color:var(--ink);color:var(--ink)}

/* ------------------------------------------- money rows, statement language */
/* The portal and the invoice used to wrap their price rows in `.breakdown`,
   a class that only ever had a frame in site.css — which the lux shell does
   not load, so the rows had been floating as bare lines (t_29d930db). They
   now live in a real statement box: hairline frame, label left, amount right,
   total and outstanding emphasised, deadline as a small line under the label. */
:is(.pcard,.portalcard) .bcbreak{
  margin:0 0 var(--s3);padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
}
:is(.pcard,.portalcard) .bcbreak .bl{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.34rem 0;font-size:.86rem;color:var(--ink-2);
  border-bottom:1px solid var(--line-2);
}
:is(.pcard,.portalcard) .bcbreak .bl:last-child{border-bottom:0}
:is(.pcard,.portalcard) .bcbreak .bl>span:first-child{min-width:0}
:is(.pcard,.portalcard) .bcbreak .bl>span:last-child{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
:is(.pcard,.portalcard) .bcbreak .bl small{display:block;font-size:.72rem;color:var(--ink-3)}
:is(.pcard,.portalcard) .bcbreak .bl.dep>span:first-child{color:var(--ink-3)}
:is(.pcard,.portalcard) .bcbreak .bl.sum{border-top:1px solid var(--line);border-bottom:0;margin-top:.3rem;padding-top:.5rem;font-weight:700;color:var(--ink);font-size:.92rem}
:is(.pcard,.portalcard) .bcbreak .bl.sum>span:last-child{font-size:1rem}

/* portal card headings stay micro — the property name above them is the title */
.pcard h3{
  margin:var(--s4) 0 var(--s2);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}

/* the invoice statement card: same card language, no status colour */
.portalcard{
  margin:0 0 var(--s4);padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  box-shadow:var(--shadow-sm);
}
.portalcard h2{font-size:1.1rem;margin:.2rem 0 var(--s3)}
.portalcard .muted{font-size:.82rem}

/* a statement is also a thing people print */
@media print{
  .hdr,.ftr,.wafloat,#consent,.pact,.copy,.pstay .plink{display:none!important}
  .portalcard{border:1px solid #ccc;box-shadow:none}
  body{background:#fff}
}


/* mobile: the modal itself becomes a sheet that uses the whole width.
   lux.css owns the dialog look (layer scale there); this page block only
   finishes the sheet: full width, rounded top, safe-area padded, taller cap. */
@media (max-width:719px){
  .modal{padding:0;align-items:flex-end}
  .modalbox{max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));max-height:92vh}
  .modalbox .x{top:.5rem;right:.5rem}
}

/* ---------------------------------------------- 8. bits the markup asks for */
.bsticky .btn.wide{margin-top:0}
.done .refbox .cp{
  margin-top:.4rem;display:inline-flex;align-items:center;gap:.3rem;
  min-height:34px;padding:.2rem .7rem;border:1px solid var(--accent-2);
  border-radius:var(--r-pill);background:transparent;color:var(--ink-2);
  font:inherit;font-size:.72rem;cursor:pointer;
}
.done .refbox .cp:hover{background:var(--accent-2);color:#fff}
.done .ghost.wide{
  margin:.4rem 0;padding:.7rem 1rem;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  color:var(--ink);font-weight:600;font-size:.9rem;min-height:46px;
}
.done .ghost.wide:hover{border-color:var(--ink);background:var(--accent-soft)}
.done .btn.wide{margin-top:.6rem}

/* two-up rows must never widen the sheet: min-content of a long <select>
   option used to push .row2 to 780px inside a 320px screen */
.pform .row2,.regbox .row2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pform .row2>*,.regbox .row2>*{min-width:0}
.portalform input,.portalform select,.pform textarea{width:100%;max-width:100%}

/* ------------------------------------------- 9. guidance the sheet was missing */
/* The rail is the only thing telling a guest the road is short — it must stay
   on screen while the form scrolls. */
@media (max-width:719px){
  .modalbody, #modal-body{padding-top:0}
  #modal-body>.psteps{
    position:sticky;top:0;z-index:4;
    margin:0 calc(-1 * var(--s5)) var(--s4);
    padding:var(--s3) var(--s5) var(--s2);
    background:rgba(250,248,244,.96);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-2);
  }
  /* focused inputs scroll in above the price bar: the bar stays pinned, the
     keyboard era never buries the field being typed into */
  .modalbox{scroll-padding-bottom:5.5rem}
}

/* required fields: one quiet brass mark, top-right, no extra markup */
.portalform label{position:relative}
.portalform label:has(input[required])::after,
.portalform label:has(input:required)::after{
  content:"*";position:absolute;top:0;right:.1rem;color:var(--accent-2);font-size:.85rem;line-height:1;
}

/* the forward button starts dimmer while required fields are empty, so it
   never promises readiness it does not have */
.pform:invalid .bsticky .btn{opacity:.62}
.pform:valid .bsticky .btn{opacity:1}

/* passport/doc number reads as a code, not prose */
.regbox input[name="doc_number"],
.regbox input[name="nationality"]{
  text-transform:uppercase;letter-spacing:.08em;font-variant-numeric:tabular-nums;
}