/* Guest account surface — design pass t_cae06796.
   Built on the lux.css tokens (warm white, forest ink, brass hairlines, one
   radius scale, soft shadows): the account must feel like the rest of the
   villa site, not a bolt-on portal. Two surfaces live here — the signed-out
   "gate" (two panels, one of them framed as the focus) and the signed-in
   dashboard (identity card, tab bar, booking cards, wishlist rows). The
   header pill, card hearts, post-booking nudge and verified-stay badge are
   also styled here because account.css is the only sheet all of them share. */

/* ---------- shared shell ---------- */
.acct{padding-bottom:var(--s8)}
.acct-solo{max-width:560px}
.acct-kicker{
  display:flex;align-items:center;gap:.55rem;margin:0 0 var(--s2);
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#6D5330;
}
.acct-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--accent-2)}
.acct-hero{margin:var(--s3) 0 var(--s5)}
.acct-hero h1{margin:0 0 var(--s3);font-size:clamp(1.75rem,4vw,2.35rem)}
.acct-lede{margin:0;max-width:52ch;color:var(--ink-2);font-size:1.02rem}
.acct-perks{list-style:none;display:grid;gap:.55rem;margin:var(--s4) 0 0;padding:0}
.acct-perks li{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--ink-2)}
.acct-perks svg{color:var(--accent-2);flex:none;margin-top:.15rem}
@media (min-width:900px){
  .acct-perks{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .acct-perks li{flex-direction:column;gap:.4rem;font-size:.86rem;line-height:1.5}
}

/* ---------- panel: one framed surface, used by every form ---------- */
.acct-panel{
  position:relative;display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);box-shadow:var(--shadow-sm);
}
.acct-panel-solo{max-width:440px}
.acct-panel h2{margin:0;font-size:1.15rem;letter-spacing:-.012em}
.acct-eyebrow{
  margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.acct-panel label{
  display:flex;flex-direction:column;gap:.3rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.acct-panel input{
  font:inherit;font-size:1rem;color:var(--ink);letter-spacing:0;text-transform:none;
  padding:.6rem .7rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  min-width:0;transition:border-color var(--t-micro) ease, box-shadow var(--t-micro) ease;
}
.acct-panel input:hover{border-color:#CFC7B8}
.acct-panel input:focus-visible{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(168,131,79,.18)}
.acct-panel input:disabled{background:var(--accent-soft);color:var(--ink-3);cursor:not-allowed}
.acct-hint{margin:0;font-size:.8125rem;line-height:1.5;color:var(--ink-3)}
.acct-alt{margin:.15rem 0 0;font-size:.875rem}
.acct-alt a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(18,47,42,.3)}
.acct-alt a:hover{text-decoration-color:var(--accent-2)}

/* the panel that matches the current mode gets the brass edges and the
   deeper shadow, so "sign in vs register" is never a coin toss */
.acct-panel.is-focus{
  border-color:rgba(168,131,79,.5);
  box-shadow:var(--shadow-md), 0 0 0 1px rgba(168,131,79,.18);
}
.acct-panel.is-focus::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--accent-2),rgba(168,131,79,.15));
}

/* ---------- auth gate ---------- */
.acct-authgrid{display:grid;gap:var(--s4);margin-top:var(--s4)}
@media (min-width:820px){
  .acct-authgrid{grid-template-columns:1fr 1fr;gap:var(--s5);align-items:stretch}
  .acct-authgrid .acct-panel .btn.wide{margin-top:auto}
}
.acct-portalrow{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s5);padding:.9rem 1.1rem;
  border:1px dashed var(--line);border-radius:var(--r-md);background:var(--accent-soft);
  font-size:.875rem;color:var(--ink-2);
}
.acct-portalrow strong{
  display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--ink);
}
.acct-portalrow:hover{border-color:var(--accent-2);color:var(--ink)}
.acct-portalrow:hover svg{transform:translateX(3px)}
.acct-portalrow svg{transition:transform var(--t-micro) ease}

/* ---------- alerts ---------- */
.acct-alert{
  margin:var(--s4) 0 0;padding:.8rem 1rem;border-radius:var(--r-sm);
  border:1px solid transparent;border-left-width:3px;font-size:.9rem;
}
.acct-alert.err{background:#FBEEEC;border-color:rgba(163,36,28,.3);border-left-color:var(--err);color:#7E1C16}
.acct-alert.ok{background:#EDF4F0;border-color:rgba(29,107,79,.28);border-left-color:var(--ok);color:#15543D}

/* ---------- dashboard: identity card ---------- */
.acct-idcard{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  margin:var(--s3) 0 var(--s5);padding:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  background-image:radial-gradient(120% 140% at 0% 0%, rgba(168,131,79,.14), rgba(168,131,79,0) 58%);
  box-shadow:var(--shadow-sm);
}
.acct-av-lg{
  display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:50%;
  background:var(--accent);color:#F6EFE2;font-size:1.15rem;font-weight:700;letter-spacing:.04em;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16), var(--shadow-sm);
}
.acct-idmain{flex:1 1 16rem;min-width:0}
.acct-idmain h1{margin:0 0 .35rem;font-size:clamp(1.5rem,3.2vw,1.95rem);overflow-wrap:anywhere}
.acct-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0;font-size:.8125rem;color:var(--ink-3)}
.acct-logout{margin:0}
.acct-chipbtn{
  font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;
  padding:.45rem .95rem;min-height:38px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  transition:border-color var(--t-micro) ease, color var(--t-micro) ease;
}
.acct-chipbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.acct-chip{
  display:inline-flex;align-items:flex-start;gap:.35rem;padding:.28rem .65rem;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:600;line-height:1.45;border:1px solid transparent;max-width:100%;
}
.acct-chip svg{width:13px;height:13px}
.acct-chip.ok{background:#EDF4F0;border-color:#CDE0D6;color:#15543D}
.acct-chip.warn{background:#FBF3E4;border-color:#EEDDBB;color:#7A5209}

/* ---------- tab bar ---------- */
.acct-tabs{
  display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:calc(var(--hdr-h) - 1px);z-index:20;
  margin:0 calc(var(--s4) * -1) var(--s5);padding:.55rem var(--s4);
  background:rgba(250,248,244,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.acct-tabs::-webkit-scrollbar{display:none}
.acct-tabs a{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:.45rem .85rem;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;color:var(--ink-2);font-size:.8125rem;font-weight:600;
  transition:border-color var(--t-micro) ease, color var(--t-micro) ease;
}
.acct-tabs a:hover,.acct-tabs a:focus-visible{border-color:var(--accent-2);color:var(--ink)}
.acct-tabs a span{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 .3rem;
  border-radius:var(--r-pill);background:var(--accent-soft);color:#6D5330;font-size:.6875rem;font-weight:700;
}

/* ---------- sections ---------- */
.acct-sec{scroll-margin-top:calc(var(--hdr-h) + 3.2rem)}
.acct-sec + .acct-sec{margin-top:var(--s7)}
.acct-sec-h{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--s3)}
.acct-sec-h h2{margin:0;font-size:1.15rem;letter-spacing:-.012em}
.acct-count{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 .35rem;
  border-radius:var(--r-pill);background:rgba(168,131,79,.16);color:#6D5330;font-size:.75rem;font-weight:700;
}
.acct-bks,.acct-wishlist{display:grid;gap:.85rem}
.acct-form-foot{display:flex;justify-content:flex-end;gap:.6rem}
.acct-fields{display:grid;gap:var(--s3)}
.acct-fields.two{grid-template-columns:1fr}
@media (min-width:640px){
  .acct-fields{grid-template-columns:1fr 1fr}
  .acct-fields.two{grid-template-columns:1fr 1fr}
  .acct-readonly{grid-column:1/-1}
}

/* ---------- booking card ---------- */
.acct-bk{
  position:relative;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden;
  border-top:3px solid var(--ink-3);
  transition:box-shadow var(--t-hover) ease, transform var(--t-hover) ease;
}
.acct-bk:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.acct-bk[data-status="confirmed"],.acct-bk[data-status="paid"],.acct-bk[data-status="arrived"]{border-top-color:var(--ok)}
.acct-bk[data-status="held"],.acct-bk[data-status="inquiry"]{border-top-color:var(--warn)}
.acct-bk[data-status="cancelled"],.acct-bk[data-status="no_show"]{border-top-color:var(--err);background:#FEFBFA}
.acct-bk-grid{display:grid;gap:var(--s3);grid-template-columns:88px 1fr;align-items:start}
@media (min-width:560px){.acct-bk-grid{grid-template-columns:112px 1fr}}
.acct-thumb{
  display:block;border-radius:var(--r-sm);overflow:hidden;background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px rgba(18,47,42,.06);
}
.acct-thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.acct-thumb.sm{width:80px;flex:none}
.acct-thumb.sm img{aspect-ratio:4/3}
.acct-thumb.ph{display:grid;place-items:center;width:80px;height:60px;color:var(--accent-2)}
.acct-bk-main{min-width:0}
.acct-bk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.acct-bk h3{
  margin:0;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink);
}
.acct-bk h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.acct-bk-dates{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:.4rem 0 var(--s3);
  font-size:.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.acct-bk-dates svg{color:var(--accent-2);flex:none}
.acct-bk-nights{color:var(--ink-3);font-size:.8125rem}
.acct-bk-nights::before{content:"·";margin-right:.45rem}
.acct-bk-money{
  display:grid;gap:.15rem;padding:.55rem .75rem;border-radius:var(--r-sm);background:var(--bg);
  border:1px solid var(--line-2);
}
.acct-bk-money .bl{font-size:.875rem}
.acct-bk-money .bl.dep span:last-child{font-weight:700;color:#8A5A12}
.acct-bk-money .bl.paid span:last-child{font-weight:700;color:var(--ok)}
.acct-bk-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:var(--s3)}
.acct-link{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.875rem;font-weight:700;color:var(--ink);
}
.acct-link svg{transition:transform var(--t-micro) ease;color:var(--accent-2)}
.acct-link:hover{text-decoration:underline;text-underline-offset:3px}
.acct-link:hover svg{transform:translateX(3px)}
.acct-bk-ref{font-size:.72rem;letter-spacing:.08em;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- wishlist row ---------- */
.acct-wish{
  display:flex;align-items:center;gap:.9rem;padding:.6rem .7rem;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  transition:opacity .18s ease, box-shadow var(--t-hover) ease, border-color var(--t-micro) ease;
}
.acct-wish:hover{box-shadow:var(--shadow-sm);border-color:#DCD5C7}
.acct-wish-main{display:flex;flex-direction:column;gap:.1rem;flex:1 1 auto;min-width:0}
.acct-wish-main strong{font-size:.95rem;font-weight:600;overflow-wrap:anywhere}
.acct-wish-main:hover strong{text-decoration:underline;text-underline-offset:3px}
.acct-wish-main span{font-size:.8125rem}
.acct-wishdel{
  display:inline-flex;align-items:center;gap:.3rem;flex:none;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:600;color:var(--ink-3);
  padding:.4rem .6rem;border-radius:var(--r-pill);border:1px solid transparent;background:none;
}
.acct-wishdel:hover{color:var(--err);border-color:rgba(163,36,28,.3);background:#FDF4F3}
@media (max-width:560px){
  .acct-wishdel span{display:none}
  .acct-wishdel{padding:.4rem}
  .acct-thumb.sm,.acct-thumb.ph{width:64px;height:48px}
}

/* ---------- empty states ---------- */
.acct-empty{
  display:grid;justify-items:center;gap:.4rem;text-align:center;padding:var(--s6) var(--s4);
  border:1px dashed #DCD5C7;border-radius:var(--r-md);background:rgba(255,255,255,.55);
}
.acct-empty-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-2);margin-bottom:.3rem;
}
.acct-empty-h{margin:0;font-weight:700}
.acct-empty-p{margin:0 0 .6rem;font-size:.875rem;color:var(--ink-3);max-width:34ch}

/* ---------- danger zone ---------- */
.acct-sec-danger .acct-sec-h h2{color:#8E2A22}
.acct-danger{border-color:rgba(163,36,28,.26);background:#FFFBFA}
.acct-danger .acct-hint{max-width:60ch}
.acct-dangerbtn{
  font:inherit;font-size:.875rem;font-weight:700;cursor:pointer;
  padding:.6rem 1.2rem;min-height:44px;border-radius:var(--r-pill);
  border:1px solid rgba(163,36,28,.4);background:#fff;color:#8E2A22;
  transition:background var(--t-micro) ease, color var(--t-micro) ease;
}
.acct-dangerbtn:hover{background:var(--err);border-color:var(--err);color:#fff}

/* ---------- verify / deleted landing ---------- */
.acct-verify{padding-top:var(--s5)}
.acct-verifystate{display:flex;align-items:center;gap:.8rem;margin:var(--s3) 0 var(--s5)}
.acct-stateseal{
  display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;
  background:#EDF4F0;color:var(--ok);border:1px solid #CDE0D6;
}
.acct-verify.is-err .acct-stateseal{background:#FBEEEC;color:var(--err);border-color:rgba(163,36,28,.3)}
.acct-stateseal svg{width:21px;height:21px}
.acct-verifymsg{margin:0;font-size:.95rem;color:var(--ink-2)}

/* =========================================================================
   header avatar pill
   ========================================================================= */
.hdracct{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  min-height:40px;padding:.3rem .9rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:.8125rem;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--t-micro) ease, transform var(--t-micro) ease, box-shadow var(--t-micro) ease;
}
.hdracct:hover{border-color:var(--accent-2);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.hdracct:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
/* signed in: the avatar carries the identity, the pill gets the brass ring */
.hdracct.on{border-color:rgba(168,131,79,.55);padding-left:.35rem}
.hdracct .acct-av{
  display:inline-grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;
  background:var(--accent);color:#F6EFE2;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
body.overhero .hdracct{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff;box-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
body.overhero .hdracct:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.6)}
body.overhero .hdracct .acct-av{background:#fff;color:var(--accent)}
/* inside the off-canvas drawer (<=1080px) the pill becomes a drawer row, so it
   matches the nav items instead of floating as a capsule in a column */
@media (max-width:1080px){
  .hdracct{order:0;justify-content:center;min-height:46px;padding:.6rem;border-radius:var(--r-ctl);font-size:.9rem}
  .hdracct.on{padding:.6rem .8rem}
  body.overhero .hdracct{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.overhero .hdracct .acct-av{background:var(--accent);color:#F6EFE2}
}

/* =========================================================================
   ♥ on villa cards
   ========================================================================= */
.vheart{
  position:absolute;top:10px;right:10px;z-index:3;
  display:inline-grid;place-items:center;width:36px;height:36px;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--ink);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 2px rgba(10,25,22,.18), 0 4px 12px rgba(10,25,22,.14);
  transition:transform var(--t-micro) ease, background var(--t-micro) ease, color var(--t-micro) ease;
}
.vheart svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:fill var(--t-micro) ease}
.vheart:hover{background:#fff;transform:scale(1.06)}
.vheart:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.vheart:active{transform:scale(.94)}
.vheart.on{background:#fff;color:#C63B60}
.vheart.on svg{fill:currentColor}

/* =========================================================================
   post-booking nudge (booking done screen)
   ========================================================================= */
.acct-nudge{
  display:flex;align-items:flex-start;gap:.55rem;flex-wrap:wrap;
  margin:var(--s3) 0 0;padding:.7rem .85rem .7rem .8rem;
  border:1px solid #EEDDBB;border-left:3px solid var(--accent-2);border-radius:var(--r-sm);
  background:#FBF6EA;font-size:.875rem;line-height:1.5;color:#5C4A2A;
}
.acct-nudge::before{
  content:"♥";color:var(--accent-2);font-size:.95rem;line-height:1.4;
}
.acct-nudge a{
  display:inline-flex;align-items:center;gap:.28rem;min-height:28px;
  font-weight:700;color:var(--ink);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:rgba(168,131,79,.7);white-space:nowrap;
}
.acct-nudge a:hover{text-decoration-color:var(--accent-2)}

/* =========================================================================
   verified-stay badge on reviews
   ========================================================================= */
.vstbadge{
  display:inline-flex;align-items:center;gap:.28rem;
  padding:.16rem .55rem;border-radius:var(--r-pill);
  background:#EAF2EE;border:1px solid #C9DED2;color:#15543D;
  font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  vertical-align:middle;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .acct-bk:hover,.hdracct:hover,.vheart:hover{transform:none}
  .acct-link:hover svg,.acct-portalrow:hover svg{transform:none}
}