.vault-body{
  background-image:linear-gradient(180deg, rgba(255,248,240,.6), rgba(255,232,210,.9)), var(--img-hero);
  background-size:cover;background-position:center;background-attachment:fixed;
}
.vault-wrap{padding-top:36px;display:flex;justify-content:center;}
.vault-card{
  position:relative;
  background:var(--white);border:1px solid var(--line);border-radius:22px;
  padding:32px 24px;max-width:420px;width:100%;text-align:center;
  box-shadow:0 24px 55px rgba(26,43,76,.12);
  overflow:hidden;
}
.vault-icon{
  width:56px;height:56px;border-radius:50%;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.vault-icon [data-lucide]{width:26px;height:26px;color:#fff;}
@keyframes spin{to{transform:rotate(360deg);}}
.btn-spin{animation:spin 1s linear infinite;}
.vault-title{font-size:23px;font-weight:800;color:var(--navy);margin-bottom:6px;}
.vault-sub{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:22px;}
.vault-hint{font-size:11.5px;color:var(--muted);margin-top:18px;line-height:1.5;}

#unlock-btn{width:100%;}
#unlock-btn:disabled{opacity:.6;cursor:not-allowed;animation:none;}

.field-label{display:block;font-size:12px;font-weight:700;color:var(--navy);margin:12px 0 6px;}
.field-input{
  width:100%;padding:13px 14px;border-radius:10px;border:1.5px solid var(--line);
  font-family:inherit;font-size:14px;color:var(--navy);background:var(--cream);
}
.field-input:focus{outline:none;border-color:var(--orange);background:var(--white);}

/* ================= PREMIUM UNBOXING REVEAL ================= */
.vault-unlocked-card{
  background:linear-gradient(180deg,var(--white) 0%,var(--cream) 100%);
  border-color:rgba(255,210,76,.5);
  animation:cardReveal .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardReveal{
  from{opacity:0;transform:translateY(14px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.unbox-seal{display:flex;justify-content:center;margin-bottom:10px;}
.unbox-ring{
  width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--yellow), var(--yellow-deep) 80%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px rgba(219,163,0,.4);
  animation:sealPop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.unbox-ring [data-lucide]{width:34px;height:34px;color:var(--navy);}
@keyframes sealPop{
  0%{transform:scale(.4) rotate(-25deg);opacity:0;}
  60%{transform:scale(1.12) rotate(8deg);opacity:1;}
  100%{transform:scale(1) rotate(0);}
}

.unlocked-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(45,138,69,.12);color:#2d8a45;border:1px solid rgba(45,138,69,.3);
  font-size:11.5px;font-weight:800;padding:5px 12px;border-radius:20px;margin-bottom:12px;
  animation:fadeUp .5s .1s both;
}
.unlocked-badge [data-lucide]{width:13px;height:13px;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.perk-banner{
  display:flex;align-items:center;gap:8px;
  background:#FFF7E0;color:#B8860B;border:1px solid #EAD199;
  font-size:12px;font-weight:700;padding:10px 14px;border-radius:12px;margin-bottom:14px;
}
.perk-banner[hidden]{display:none;}
.perk-banner [data-lucide]{width:15px;height:15px;flex:none;}

/* confetti — pure CSS, no canvas/lib needed */
.confetti-zone{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.confetti-piece{
  position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;opacity:.9;
  animation:confettiFall 1.6s ease-in forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1;}
  100%{transform:translateY(340px) rotate(540deg);opacity:0;}
}

.file-list{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;text-align:left;}
.file-row{
  display:flex;align-items:center;gap:12px;width:100%;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;cursor:pointer;font-family:inherit;color:var(--navy);
  transition:.18s;text-decoration:none;
  animation:fileIn .4s both;
  box-shadow:0 4px 14px rgba(26,43,76,.04);
}
.file-row:nth-child(1){animation-delay:.15s;}
.file-row:nth-child(2){animation-delay:.25s;}
.file-row:nth-child(3){animation-delay:.35s;}
.file-row:nth-child(4){animation-delay:.45s;}
.file-row:nth-child(5){animation-delay:.55s;}
@keyframes fileIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.file-row:hover{border-color:var(--orange-light);transform:translateY(-2px);box-shadow:0 10px 22px rgba(249,115,22,.12);}

.file-icon{
  width:42px;height:42px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.file-icon [data-lucide]{width:20px;height:20px;color:#fff;}
.file-icon.xlsx{background:linear-gradient(135deg,#3fae5c,#2d8a45);}
.file-icon.pdf{background:linear-gradient(135deg,#e0473c,#b8352c);}

.file-meta{flex:1;display:flex;flex-direction:column;min-width:0;}
.file-meta b{font-size:13px;}
.file-meta span{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.file-dl{
  flex:none;display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  color:var(--orange-dark);background:rgba(249,115,22,.1);padding:7px 11px;border-radius:9px;
}
.file-dl [data-lucide]{width:13px;height:13px;}

.vault-footer-note{
  position:relative;z-index:1;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:'Caveat','Segoe Script',cursive;font-size:18px;color:var(--navy);font-weight:700;
}
.vault-footer-note [data-lucide]{width:16px;height:16px;color:var(--orange);}

.file-note{margin-top:16px;font-size:12px;color:var(--muted);background:var(--cream);border-radius:10px;padding:10px 12px;}

/* ============================================================================
   FILES-FIRST PREVIEW VIEW (2026-09-08)

   A vault opened before payment. The file rows are the SAME rows a paid buyer
   sees — same labels, same filenames, same order — because the point of the
   view is that these are demonstrably their real files, not a teaser list.
   Only their affordance changes.

   Locked rows are <div>, not <a> (see js/vault.js): there is no href here to
   style away, so none of this is doing security work. It is doing the other
   half of the job — making "held, not missing" legible at a glance.
   ========================================================================== */
.preview-banner{
  position:relative; z-index:1; text-align:left;
  margin:0 0 18px; padding:16px 15px;
  background:var(--ff-mint);
  border:1.5px solid var(--ff-mint-line); border-radius:14px;
}
.preview-banner[hidden]{ display:none; }
.pb-top{ display:flex; align-items:center; gap:8px; margin-bottom:7px;
  font-size:13px; font-weight:800; color:var(--ff-ink);
  letter-spacing:.04em; }
.pb-top svg{ width:16px; height:16px; color:var(--ff-deep); }
.pb-copy{ font-size:12.5px; line-height:1.6; color:var(--ink); margin:0 0 13px; }
.pb-copy b{ color:var(--ff-ink); }
.preview-pay-btn{ width:100%; }
.preview-pay-bottom{ position:relative; z-index:1; margin-top:16px; }
.preview-pay-bottom[hidden]{ display:none; }
.pb-fine{ display:block; margin-top:8px; font-size:11px; color:var(--muted); text-align:center; }

/* Fires when a locked row is tapped. Short and once — a permanently pulsing
   pay button reads as an ad, a single pulse in direct response to a tap reads
   as an answer to what they just did. */
@keyframes ctaPulse{
  0%{ box-shadow:0 0 0 0 rgba(249,115,22,.55); }
  70%{ box-shadow:0 0 0 14px rgba(249,115,22,0); }
  100%{ box-shadow:0 0 0 0 rgba(249,115,22,0); }
}
.cta-pulse{ animation:ctaPulse 1.1s ease-out 2; }
@media (prefers-reduced-motion:reduce){ .cta-pulse{ animation:none; } }

/* ---- locked file rows ---- */
.file-row.locked{
  cursor:pointer;
  background:#FAF7F2;
  border-style:dashed;
  /* Muted, NOT faded into unreadability. They have to be able to read every
     filename — recognising the exact thing they are waiting on is the whole
     mechanism. Opacity below ~.75 starts costing that. */
  opacity:.78;
}
.file-row.locked:hover{
  opacity:1; border-color:var(--orange); transform:none;
  box-shadow:0 6px 16px rgba(26,43,76,.08);
}
.file-row.locked .file-meta b{ color:var(--muted); }
.file-icon.locked{ background:linear-gradient(135deg,#B9B2A8,#8F887E) !important; }
.file-dl-locked{ color:var(--muted) !important; }
.file-dl-free{
  color:var(--success) !important; font-weight:800;
  background:var(--success-light); border-radius:999px; padding:5px 10px;
}
/* The one openable row in an otherwise locked list. It should look like the
   gift it is, and it is the only row on the page with a live href. */
.file-row:not(.locked) .file-dl-free ~ *, 
.file-row .file-dl-free{ letter-spacing:.02em; }

/* The pay CTA carries a price and a promise, which is more words than .btn's
   single-line flex row can hold at 430px — it broke as "Bayaran ₱1,596" on one
   line and "— buksan lahat" on the next, straddling the icon. Let it wrap as
   ordinary centred text instead of as flex children. */
.preview-pay-btn{
  display:block; text-align:center; line-height:1.35;
  white-space:normal; padding:14px 16px;
}
.preview-pay-btn svg{ display:inline-block; vertical-align:-3px; margin-right:6px; }
.preview-pay-btn span{ white-space:nowrap; }
/* Keep the badge compact so the filename column keeps its width. */
.file-dl-free{ white-space:nowrap; }

/* The "Files muna, bago bayad" chip on the vault card, preview mode only.
   .unlocked-badge is shared with the PAID view, so this is scoped by the
   sibling banner being visible rather than by overriding the badge itself. */
.vault-unlocked-card:has(.preview-banner:not([hidden])) .unlocked-badge{
  background:var(--ff-mint); border-color:var(--ff-mint-line); color:var(--ff-ink);
}
.vault-unlocked-card:has(.preview-banner:not([hidden])) .unlocked-badge [data-lucide]{ color:var(--ff-deep); }
/* :has() is unsupported on older WebKit; the badge simply keeps its default
   green there, which is legible and correct-looking. Nothing depends on it. */