/* =====================================================================
   Ucapan Tetamu — the guestbook (markup: includes/sections/wishes.php,
   behaviour: js/guestbook.js). Built from the invitation's own pieces:
   ivory paper card, maroon ink, gold hairlines, Allura signatures.

   The wishes are a stack of paper cards: all cards sit in the same grid
   cell (so they share one size) and js/guestbook.js moves each one with
   transforms, like a hand-held stack of index cards.
   ===================================================================== */

.guestbook__intro{ font-style:italic; }

/* ---- stage: the stack with an arrow on each side --------------------------- */
.stage{
  --peek:34px;                         /* room for the cards peeking out below the front one */
  position:relative;
  padding:0 22px;
}
.stack{
  position:relative;
  padding:0 14px var(--peek);
  touch-action:pan-y;                  /* the page still scrolls up/down; sideways belongs to the cards */
  -webkit-user-select:none;
          user-select:none;
  cursor:grab;
  border-radius:2px;
}
.stack.is-dragging{ cursor:grabbing; }
.stack.is-single{ cursor:default; }
.stack__cards{
  list-style:none;
  margin:0; padding:0;
  display:grid;                        /* every card in the one cell: equal size, stacked */
}

/* ---- one wish: a paper card ----------------------------------------------------- */
.note{
  grid-area:1 / 1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:16rem;
  padding:1.8rem 1.9rem 1.6rem;
  text-align:center;
  background:#fffdf8;
  border:1px solid rgba(201,164,100,.55);
  /* double gold hairline, like fine stationery */
  box-shadow:
    inset 0 0 0 5px #fffdf8,
    inset 0 0 0 6px rgba(201,164,100,.35),
    0 6px 14px rgba(60,10,8,.12);
  transform-origin:50% 92%;            /* cards pivot near their bottom edge, like a fan */
  will-change:transform, opacity;
}
.note__heart{ flex:none; width:22px; height:22px; margin-bottom:.8rem; color:var(--gold); }
.note__text{
  margin:0;
  font-size:.95rem;
  line-height:1.75;
  color:var(--ink);
  white-space:pre-line;                /* keep the guest's line breaks */
  overflow-wrap:anywhere;              /* long words never break the card */
}
.note__text::before{ content:"\201C"; }
.note__text::after{ content:"\201D"; }
.note__name{
  margin:.9rem 0 0;
  font-family:var(--font-allura);
  font-size:1.9rem;
  line-height:1.15;
  color:var(--maroon);
  overflow-wrap:anywhere;
}
.note__name::before{
  content:"";
  display:block;
  width:2rem; height:1px;
  margin:0 auto .6rem;
  background:var(--gold);
}

/* ---- ‹ › on the left and right of the stack, centred on the front card --------------- */
.stage__arrow{
  position:absolute;
  top:calc((100% - var(--peek)) / 2);
  z-index:3000;                        /* above every card while it flips */
  transform:translateY(-50%);
  width:44px; height:44px;
  display:grid; place-items:center;
  padding:0;
  border:1px solid var(--maroon);
  border-radius:50%;
  background:var(--paper-card);
  color:var(--maroon);
  box-shadow:0 4px 10px rgba(60,10,8,.18);
  cursor:pointer;
  transition:background-color .25s var(--ease-soft), color .25s var(--ease-soft), opacity .25s var(--ease-soft);
}
.stage__arrow--prev{ left:0; }
.stage__arrow--next{ right:0; }
.stage__arrow svg{ width:20px; height:20px; }
.stage__arrow:disabled{ opacity:.35; cursor:default; }
@media (hover:hover){ .stage__arrow:not(:disabled):hover{ background:var(--maroon); color:var(--ivory); } }

.stage:has(.stack.is-single) .stage__arrow{ display:none; }

.guestbook__count{
  margin:.1rem 0 0;
  text-align:center;
  font-size:.75rem;
  letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}

/* ---- "+ Tambah Ucapan" and the thank-you line --------------------------------------- */
.guestbook__add{ margin-top:1.3rem; text-align:center; }
.guestbook__add .form-status{ margin-top:.8rem; }

/* ---- nothing yet: a warm invitation to be first ------------------------------------------ */
.guestbook__empty{
  padding:1.9rem 1.2rem 1.7rem;
  text-align:center;
  border:1px dashed rgba(201,164,100,.75);
  background:rgba(255,253,248,.6);
}
.guestbook__heart{ width:30px; height:30px; margin:0 auto .7rem; color:var(--gold); }
.guestbook__empty p{
  font-family:var(--font-allura);
  font-size:1.75rem;
  line-height:1.25;
  color:var(--maroon);
}

/* ---- form (inside the popup) -------------------------------------------------------------------- */
.guestbook-form{ display:grid; gap:1rem; text-align:left; }
.field__count{
  justify-self:end;
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#a3242a; }
.form-status[data-state="error"]::before{ content:"! "; font-weight:700; }   /* not colour alone */