/* ═══════════════════════════════════════════════════════════════
   VILLA ASTU — guest portal
   Shares the site's token system (see css/main.css).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:      #17150f;
  --ink-2:    #211e15;
  --bone:     #f1ead9;
  --bone-2:   #e7ddc4;
  --amber:    #c68a3f;
  --amber-2:  #e2ab55;
  --petrol:   #33655c;
  --petrol-d: #223f38;
  --clay:     #9c5b41;

  --font-display: 'Cardinal', 'Instrument Serif', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Neue Haas Grotesk', system-ui, sans-serif;
  --font-mono: 'FH Alpha', 'Plus Jakarta Sans', system-ui, sans-serif;
  --r: 4px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
body{
  font-family:var(--font-body); color:var(--ink); background:var(--bone);
  line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100svh;
}
/* the same Balinese line-art ground the light sections of the site use, so the
   portal reads as the same place rather than a separate admin tool.
   The column layout pins the footer: panes vary a lot in height (Wallet can be
   two lines, Add-ons is fourteen cards) and in normal flow the footer simply
   followed the content, jumping up the screen on the short ones. */
.app{
  display:flex; flex-direction:column; min-height:100svh;
  position:relative;
  background:
    linear-gradient(rgba(241,234,217,.86), rgba(241,234,217,.86)),
    url('../assets/img/bali-paper.jpg') top center / 900px auto repeat;
}
img{ max-width:100%; display:block; }
a{ color:var(--petrol); }
button{ font:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.1; }
h2{ font-size:clamp(1.7rem,4vw,2.4rem); }
.mono{ font-family:var(--font-mono); font-weight:500; font-size:.78rem; letter-spacing:.08em;
  font-variant-numeric:tabular-nums; }
.eyebrow{ color:var(--clay); font-size:.82rem; margin-bottom:.6rem; }
.eyebrow span{ opacity:.55; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em;
  padding:.8rem 1.5rem; border-radius:var(--r); text-decoration:none;
  border:1px solid transparent; transition:all .22s;
}
.btn--solid{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.btn--solid:hover{ background:var(--amber-2); }
.btn--line{ border-color:rgba(23,21,15,.28); color:var(--ink); background:transparent; padding:.5rem 1rem; }
.btn--line:hover{ background:var(--ink); color:var(--bone); }
.btn[disabled]{ opacity:.5; cursor:default; }

/* ── forms ─────────────────────────────────────────────── */
.form{ display:flex; flex-direction:column; gap:1rem; }
.form[hidden]{ display:none; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form label{ display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.form input,.form select,.form textarea{
  font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  padding:.75rem .85rem; border:1px solid rgba(23,21,15,.22); border-radius:var(--r);
  background:#f7f2e6;
}
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--petrol); }
.form .btn{ align-self:flex-start; }

/* ── login ─────────────────────────────────────────────── */
.login{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; position:relative; overflow:hidden;
}
/* warm ink over the twilight frame, the same scrim the village section uses —
   it darkens for legibility without tinting the photograph */
.login::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(rgba(23,21,15,.58) 0%, rgba(23,21,15,.48) 40%, rgba(23,21,15,.88) 100%),
    url('../assets/img/hero-twilight.jpg') center/cover;
}
/* penjor at the edges, as on the reviews section: an arrival, framed */
.login::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    url('../assets/img/deco-left.webp')  left  bottom / auto 92% no-repeat,
    url('../assets/img/deco-right.webp') right bottom / auto 74% no-repeat;
  opacity:.18;
}
.login__card{
  position:relative; z-index:1;
  width:min(430px,100%); border-radius:8px;
  padding:clamp(1.8rem,5vw,2.6rem);
  background:rgba(241,234,217,.94);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 40px 90px -34px rgba(12,11,8,.85);
  text-align:center;
}
/* height:auto is load-bearing: the width/height attributes map to CSS
   presentation hints, so without it height=555 stretches the mark vertically */
.login__mark{ width:min(210px,66%); height:auto; margin:0 auto .2rem;
  filter:invert(1); opacity:.88; }
.login__rule{ width:150px; height:auto; margin:.8rem auto 1.2rem; opacity:.45; }
.login .eyebrow{ letter-spacing:.24em; text-transform:uppercase; font-size:.68rem; }
.login h1{ margin-bottom:.5rem; }
.login__sub{ opacity:.8; font-size:.95rem; margin-bottom:1.4rem; }
.login .form{ text-align:left; }
.login .form .btn{ align-self:stretch; }
.login__err{ color:var(--clay); }
.login__help{ margin-top:1.4rem; opacity:.75; }

/* ── app frame ─────────────────────────────────────────── */
.app__top{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:1rem clamp(1.2rem,4vw,2.5rem);
  background:var(--ink); color:var(--bone);
}
/* matches .nav__brand on the marketing page exactly, so the header reads as
   the same masthead rather than a second identity */
.app__brand{
  font-family:var(--font-display); letter-spacing:.24em; font-size:1.05rem;
  color:var(--bone); text-decoration:none; display:inline-flex; align-items:center;
}
.app__stay{ opacity:.7; margin-right:auto; }
.app__top .btn--line{ border-color:rgba(241,234,217,.3); color:var(--bone); }
.app__top .btn--line:hover{ background:var(--bone); color:var(--ink); }

.app__tabs{
  display:flex; gap:.3rem; overflow-x:auto; scrollbar-width:none;
  padding:.6rem clamp(1.2rem,4vw,2.5rem);
  background:var(--ink); border-bottom:1px solid rgba(241,234,217,.12);
  position:sticky; top:0; z-index:10;
}
.app__tabs::-webkit-scrollbar{ display:none; }
.app__tabs button{
  background:none; border:0; color:var(--bone); opacity:.6; white-space:nowrap;
  padding:.55rem .9rem; border-radius:99px; font-size:.74rem; letter-spacing:.07em;
  text-transform:uppercase; transition:opacity .2s, background .2s;
}
.app__tabs button:hover{ opacity:1; }
.app__tabs button.is-active{ opacity:1; background:rgba(226,171,85,.16); color:var(--amber-2); }
.app__badge{
  display:inline-block; min-width:1.15rem; text-align:center; padding:.05rem .3rem;
  background:var(--amber); color:var(--ink); border-radius:99px; margin-left:.25rem;
}

.app__main{ flex:1 0 auto; width:100%; max-width:1080px; margin-inline:auto; padding:clamp(1.6rem,4vw,3rem) clamp(1.2rem,4vw,2.5rem) 4rem; }
.pane h2{ margin-bottom:.5rem; }
.pane__lead{ opacity:.8; max-width:44rem; margin-bottom:1.8rem; }
.pane__subhead{ letter-spacing:.18em; text-transform:uppercase; color:var(--clay); margin:2.2rem 0 1rem; }

.app__foot{
  margin-top:auto;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.2rem clamp(1.2rem,4vw,2.5rem);
  background:var(--ink); color:var(--bone); opacity:.9;
}
.app__foot a{ color:var(--amber-2); }

/* ── overview ──────────────────────────────────────────── */
.ov-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.ov-card{
  border:1px solid rgba(23,21,15,.15); border-radius:var(--r);
  padding:1.5rem; background:#f6f1e4;
}
.ov-card h3{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--clay); margin-bottom:.7rem; }
.ov-card__big{ font-family:var(--font-display); font-size:1.35rem; }
.ov-card__dim{ opacity:.65; margin-top:.5rem; line-height:1.8; }
.ov-card--accent{ background:linear-gradient(130deg, rgba(51,101,92,.1), rgba(198,138,63,.12));
  display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.ov-card--accent .btn{ margin-top:auto; }

/* ── guide ─────────────────────────────────────────────── */
.guide{ display:flex; flex-direction:column; gap:.6rem; max-width:52rem; }
.guide details{
  border:1px solid rgba(23,21,15,.15); border-radius:var(--r); background:#f6f1e4;
}
.guide summary{
  cursor:pointer; padding:1rem 1.3rem; font-family:var(--font-display); font-size:1.1rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.guide summary::after{ content:"+"; font-family:var(--font-mono); color:var(--clay); }
.guide details[open] summary::after{ content:"−"; }
.guide details p{ padding:0 1.3rem 1.2rem; opacity:.85; font-size:.95rem; }

/* ── add-ons ───────────────────────────────────────────── */
.feat{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.feat .svc{ background:linear-gradient(130deg, rgba(51,101,92,.09), rgba(198,138,63,.1)); }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.svc{
  border:1px solid rgba(23,21,15,.15); border-radius:var(--r);
  padding:1.3rem; background:#f6f1e4; display:flex; flex-direction:column; gap:.45rem;
}
.svc h4{ font-family:var(--font-display); font-weight:400; font-size:1.15rem; }
.svc p{ font-size:.88rem; opacity:.8; flex-grow:1; }
.svc footer{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-top:.5rem; }
.svc footer .mono{ color:var(--clay); font-size:.7rem; }

/* ── wallet ────────────────────────────────────────────── */
.wallet{ display:flex; flex-direction:column; gap:.6rem; max-width:56rem; }
.wallet__empty{ opacity:.7; }
.worder{
  display:grid; grid-template-columns:1fr auto auto; gap:.4rem 1.2rem; align-items:center;
  border:1px solid rgba(23,21,15,.15); border-radius:var(--r); background:#f6f1e4;
  padding:1rem 1.2rem;
}
.worder__name{ font-weight:600; }
.worder__meta{ grid-column:1; font-size:.78rem; opacity:.65; }
.worder__price{ font-family:var(--font-mono); font-size:.85rem; white-space:nowrap; }
.worder__status{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:99px; white-space:nowrap;
}
.worder__status--requested{ background:rgba(198,138,63,.18); color:#7a5322; }
.worder__status--confirmed{ background:rgba(51,101,92,.16); color:var(--petrol-d); }
.worder__status--done{ background:rgba(23,21,15,.1); }
.worder__status--cancelled{ background:rgba(23,21,15,.06); opacity:.6; text-decoration:line-through; }
.worder__cancel{ background:none; border:0; font-family:var(--font-mono); font-size:.7rem;
  color:var(--clay); text-decoration:underline; grid-column:3; justify-self:end; }
.wallet__total{
  margin-top:1.2rem; padding:1.1rem 1.3rem; max-width:56rem;
  border:1px dashed rgba(23,21,15,.3); border-radius:var(--r);
  display:flex; justify-content:space-between; font-size:.9rem;
}

/* ── what's on ─────────────────────────────────────────── */
.evlist{ list-style:none; max-width:56rem; }
.evlist li{
  display:grid; grid-template-columns:130px 1fr; gap:1.2rem;
  padding:1.1rem 0; border-bottom:1px solid rgba(23,21,15,.14);
}
.evlist li:first-child{ border-top:1px solid rgba(23,21,15,.14); }
.ev__when{ color:var(--petrol); text-transform:uppercase; letter-spacing:.08em; padding-top:.2rem; }
.ev__tag{
  display:inline-block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.15rem .55rem; border-radius:99px; margin-left:.5rem;
  vertical-align:middle; background:rgba(51,101,92,.14); color:var(--petrol-d);
}
.ev__tag--ceremony{ background:rgba(156,91,65,.16); color:#6d3a26; }
.ev__tag--season{ background:rgba(198,138,63,.18); color:#7a5322; }
.evlist h4{ display:inline; }
.evlist p{ font-size:.92rem; opacity:.8; margin-top:.25rem; }
.evlist a{ font-size:.82rem; }

/* ── photos ────────────────────────────────────────────── */
.drop{
  display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center;
  border:2px dashed rgba(23,21,15,.25); border-radius:6px; padding:2.2rem 1.5rem;
  cursor:pointer; max-width:34rem; transition:border-color .2s, background .2s;
}
.drop:hover{ border-color:var(--amber); background:rgba(198,138,63,.05); }
.drop__icon{ font-size:1.6rem; color:var(--clay); }
.drop i{ font-style:normal; opacity:.6; }
.drop__status{ margin-top:.8rem; color:var(--petrol); }
.shots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; margin-top:1.5rem; }
.shots figure{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:1; background:#e4dcc6; }
.shots img{ width:100%; height:100%; object-fit:cover; }
.shots button{
  position:absolute; top:.4rem; right:.4rem; width:26px; height:26px; border-radius:50%;
  border:0; background:rgba(23,21,15,.65); color:var(--bone); line-height:1;
}

/* ── after ─────────────────────────────────────────────── */

.rebook{
  border:1px dashed var(--petrol); border-radius:6px; padding:1.8rem;
  background:rgba(51,101,92,.06); margin-bottom:1.5rem;
}
.rebook__code{
  font-family:var(--font-mono); font-size:1.5rem; letter-spacing:.14em; color:var(--petrol-d);
  padding:.4rem 0; user-select:all;
}
.after__links{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem; }
.after p{ opacity:.85; margin-bottom:.8rem; }

/* ── modal ─────────────────────────────────────────────── */
.modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal[hidden]{ display:none; }
.modal__scrim{ position:absolute; inset:0; background:rgba(23,21,15,.7); backdrop-filter:blur(3px); }
.modal__card{ position:relative; width:min(440px,100%); background:var(--bone); border-radius:6px; padding:2rem; }
.modal__card h3{ margin-bottom:.2rem; }
.modal__price{ color:var(--clay); margin-bottom:1.2rem; }
.modal__x{ position:absolute; top:.7rem; right:.9rem; background:none; border:0; font-size:1.5rem; opacity:.6; }

/* ── toast ─────────────────────────────────────────────── */
.toast{
  position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--bone); font-family:var(--font-mono); font-size:.8rem;
  padding:.8rem 1.4rem; border-radius:99px; opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s; z-index:70; max-width:90vw; text-align:center;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }


/* ═══ design layer ═══════════════════════════════════════════
   Everything below exists to make the portal feel like the rest
   of the site rather than a dashboard bolted to the side of it. */

/* a welcome band: the guest's name over villa photography, the same
   move the marketing hero makes, at a quieter scale */
.welcome{
  position:relative; overflow:hidden; border-radius:8px;
  margin-bottom:clamp(1.6rem,4vw,2.4rem);
  min-height:clamp(190px,26vw,280px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.4rem,4vw,2.2rem);
  color:var(--bone);
  background:
    linear-gradient(rgba(23,21,15,.15) 0%, rgba(23,21,15,.55) 55%, rgba(23,21,15,.88) 100%),
    url('../assets/img/pool-paddies.jpg') center 62% / cover;
}
.welcome h2{ color:var(--bone); font-size:clamp(1.9rem,5vw,3rem); margin-bottom:.35rem; }
.welcome .pane__lead{ color:var(--bone); opacity:.88; margin-bottom:0; max-width:36rem; }
.welcome__rule{ width:150px; opacity:.5; margin-bottom:.9rem; }

/* section headings carry the divider ornament, as on the marketing page */
.pane__subhead{ display:flex; align-items:center; gap:.9rem; }
.pane__subhead::after{
  content:""; flex:1; height:1px; background:rgba(23,21,15,.18);
}

/* add-ons become picture cards rather than text boxes */
.svc{ padding:0; overflow:hidden; }
.svc__img{
  aspect-ratio:16/10; background:#e4dcc6; overflow:hidden;
}
.svc__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.svc:hover .svc__img img{ transform:scale(1.05); }
.svc__body{ padding:1.15rem 1.2rem 1.25rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.feat .svc__img{ aspect-ratio:16/9; }

/* the offering, as on the team section, closing the stay */
/* the container widens so the offering gets its own column; the copy stays at
   a readable measure rather than running under the artwork */
.after{ position:relative; max-width:64rem; }
.after > *:not(.after__offering){ max-width:44rem; }
.after__offering{
  position:absolute; top:0; right:0; width:clamp(96px,13vw,160px);
  opacity:.92; pointer-events:none;
  filter:drop-shadow(0 18px 28px rgba(23,21,15,.22));
}
.rebook{ position:relative; z-index:1; }

/* arrival guide: a photograph to anchor it, matching the site's feature blocks */
.guide-hero{
  border-radius:8px; overflow:hidden; margin-bottom:1.6rem;
  aspect-ratio:21/9; background:#e4dcc6;
}
.guide-hero img{ width:100%; height:100%; object-fit:cover; }

/* photo drop zone on the paper ground */
.drop{ background:rgba(247,242,230,.7); }

@media (max-width: 640px){
  .after__offering{ display:none; }
  .login::after{ background-size:auto 60%, auto 48%; opacity:.2; }
  .welcome{ min-height:170px; }
}

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 860px){
  .svc-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .ov-grid{ grid-template-columns:1fr; }
  .feat{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .evlist li{ grid-template-columns:1fr; gap:.3rem; }
  .worder{ grid-template-columns:1fr auto; }
  .worder__cancel{ grid-column:2; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
}