/* ------------------------------------------------------------------
   Khu vườn Nội tâm · Paywall module (V13.6)
   Kế thừa biến màu từ world.css. Nếu paywall dùng độc lập ở trang
   khác, biến --pw-* có giá trị fallback nên vẫn hoạt động.
   ------------------------------------------------------------------ */
:root{
  --pw-ink-0:var(--ink-0,#0c1a20);
  --pw-ink-1:var(--ink-1,#122630);
  --pw-ink-2:var(--ink-2,#1a3540);
  --pw-lantern:var(--lantern,#e8a865);
  --pw-lantern-strong:var(--lantern-strong,#ffd29c);
  --pw-moon:var(--moon,#ede8dd);
  --pw-line:var(--line,rgba(215,235,228,.16));
  --pw-line-strong:var(--line-strong,rgba(215,235,228,.28));
  --pw-serif:var(--serif,"Cormorant Garamond",Georgia,serif);
  --pw-sans:var(--sans,system-ui,-apple-system,"Segoe UI",sans-serif);
  --pw-ease:var(--ease-out,cubic-bezier(.23,1,.32,1));
}

/* Lớp áo mờ đặt lên phần nội dung bị chặn — tạo sự tò mò,
   không xoá nội dung. Class này áp cho div bị khoá. */
.paywall-veil{
  filter:blur(10px) saturate(.85);
  opacity:.55;
  pointer-events:none;
  user-select:none;
  transition:filter .55s var(--pw-ease),opacity .55s var(--pw-ease);
}

/* Overlay chính */
.paywall-overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:16px 12px calc(16px + env(safe-area-inset-bottom));
  background:radial-gradient(60% 60% at 50% 40%,rgba(10,26,32,.62),rgba(6,14,18,.88));
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  opacity:0;visibility:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transition:opacity .35s var(--pw-ease),visibility .35s;
}
.paywall-overlay.is-open{opacity:1;visibility:visible}

/* Thẻ nội dung — glassmorphism ấm, viền đèn nhẹ */
.paywall-card{
  position:relative;
  width:min(440px,100%);
  max-height:min(92dvh, 720px);
  display:flex;
  flex-direction:column;
  padding:28px 24px 20px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(20,40,50,.86),rgba(12,26,34,.9));
  border:1px solid var(--pw-line-strong);
  color:var(--pw-moon);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,220,180,.06);
  text-align:center;
  transform:translateY(14px) scale(.98);
  transition:transform .5s var(--pw-ease),box-shadow .6s var(--pw-ease);
  overflow:hidden;
}
.paywall-overlay.is-open .paywall-card{transform:none}
.paywall-card::before{
  content:"";
  position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(232,168,101,.5),rgba(232,168,101,0) 42%,rgba(232,168,101,.35) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* Đèn lồng nhỏ đầu thẻ, thở nhẹ */
.paywall-lantern{
  width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,var(--pw-lantern-strong),var(--pw-lantern) 55%,rgba(232,168,101,.1) 82%);
  box-shadow:0 0 24px 6px rgba(232,168,101,.35),0 0 60px 18px rgba(232,168,101,.16);
  animation:pw-breathe 2.8s ease-in-out infinite;
}
@keyframes pw-breathe{
  0%,100%{transform:scale(1);box-shadow:0 0 20px 4px rgba(232,168,101,.3),0 0 50px 14px rgba(232,168,101,.12)}
  50%    {transform:scale(1.08);box-shadow:0 0 28px 8px rgba(232,168,101,.5),0 0 80px 22px rgba(232,168,101,.22)}
}

.paywall-title{
  font-family:var(--pw-serif);font-weight:600;
  font-size:clamp(20px,3.4vw,25px);line-height:1.25;letter-spacing:.005em;
  margin:6px 0 10px;color:var(--pw-moon);
}
.paywall-desc{
  font-family:var(--pw-sans);
  font-size:14.5px;line-height:1.6;
  color:rgba(237,232,221,.75);
  margin:0 auto 20px;max-width:34ch;
}

.paywall-body{
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:12px;
  padding:4px 2px;
  width:100%;
}

/* Trạng thái loading — đèn lồng nhấp nháy mờ ảo */
.paywall-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 0 8px;width:100%;text-align:center}
.paywall-loading small{color:rgba(237,232,221,.6);font-size:13px;letter-spacing:.02em}
.paywall-spinner{
  width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 45% 40%,var(--pw-lantern-strong),rgba(232,168,101,.6) 55%,transparent 78%);
  animation:pw-spinner 1.5s ease-in-out infinite;
}
@keyframes pw-spinner{
  0%,100%{transform:scale(.82);filter:brightness(.8);box-shadow:0 0 22px 4px rgba(232,168,101,.12)}
  50%    {transform:scale(1.1); filter:brightness(1.2);box-shadow:0 0 34px 10px rgba(232,168,101,.42)}
}

/* Trạng thái thanh toán — căn giữa hoàn toàn */
.paywall-payment{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
  margin:0 auto;
}

/* Mã QR — nền màu giấy nến ấm, sáng nhẹ như treo dưới đèn lồng */
.paywall-qr{
  width:220px;height:220px;padding:14px;border-radius:16px;
  background:#f7ecd8;
  box-shadow:0 0 40px -6px rgba(232,168,101,.45),0 12px 40px -12px rgba(0,0,0,.7);
  margin:0 auto 8px auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.paywall-qr img{width:100%;height:100%;display:block;object-fit:contain;margin:0 auto}
.paywall-hint{font-size:13px;color:rgba(237,232,221,.72);letter-spacing:.02em;margin:4px auto 0 auto;text-align:center}
.paywall-error{
  font-size:13.5px;color:#f2b3a2;
  background:rgba(229,138,123,.08);border:1px solid rgba(229,138,123,.28);
  padding:10px 12px;border-radius:10px;margin:8px auto 0 auto;max-width:32ch;
  text-align:center;
}

/* Trạng thái thành công — đèn lồng vụt sáng */
.paywall-success{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0 4px}
.paywall-flare{
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 45% 40%,#ffffff,var(--pw-lantern-strong) 40%,rgba(232,168,101,.2) 76%,transparent);
  animation:pw-flare 1.4s var(--pw-ease) forwards;
}
@keyframes pw-flare{
  0%  {transform:scale(.4);opacity:0;box-shadow:none}
  45% {transform:scale(1.18);opacity:1;box-shadow:0 0 44px 14px rgba(255,236,190,.65)}
  100%{transform:scale(1);opacity:1;box-shadow:0 0 90px 30px rgba(255,236,190,.35)}
}
.paywall-success-msg{font-family:var(--pw-serif);font-size:20px;color:var(--pw-lantern-strong)}
.paywall-card.is-success{animation:pw-card-glow .95s ease-out forwards}
@keyframes pw-card-glow{
  0%  {box-shadow:0 40px 120px -30px rgba(0,0,0,.7)}
  55% {box-shadow:0 0 60px 12px rgba(255,220,180,.55),0 40px 120px -30px rgba(0,0,0,.7)}
  100%{box-shadow:0 0 40px 6px rgba(255,220,180,.4),  0 40px 120px -30px rgba(0,0,0,.7)}
}

/* Thông tin chuyển khoản chi tiết */
.paywall-info{
  width:100%;max-width:320px;
  background:rgba(18,38,48,.65);
  border:1px solid var(--pw-line);
  border-radius:14px;
  padding:12px 14px;
  margin:4px auto 0;
  font-size:13px;
  text-align:left;
  display:flex;flex-direction:column;gap:6px;
}
.paywall-info-row{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.paywall-info-label{
  color:rgba(237,232,221,.65);font-size:12px;
}
.paywall-info-val{
  font-weight:600;color:var(--pw-moon);
}
.paywall-amount-val{
  color:var(--pw-lantern-strong);font-size:14px;font-weight:700;
}
.paywall-memo-val{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(232,168,101,.12);
  border:1px dashed rgba(232,168,101,.4);
  padding:2px 8px;border-radius:6px;
  color:var(--pw-lantern-strong);
  font-family:monospace;font-size:13px;
}
.paywall-copy-btn{
  background:none;border:none;cursor:pointer;
  color:var(--pw-lantern);font-size:11px;
  padding:2px 4px;border-radius:4px;
  text-decoration:underline;
}
.paywall-copy-btn:hover{color:var(--pw-lantern-strong)}
.paywall-status-note{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:rgba(237,232,221,.7);
  margin-top:2px;
}
.paywall-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--pw-lantern);
  box-shadow:0 0 8px var(--pw-lantern);
  animation:pw-dot-pulse 1.8s infinite ease-in-out;
}
@keyframes pw-dot-pulse{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.25);box-shadow:0 0 12px var(--pw-lantern-strong)}
}

/* Nút */
.paywall-actions{
  flex-shrink:0;
  display:flex;flex-direction:column;gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
}
.paywall-btn{
  appearance:none;border:0;cursor:pointer;
  padding:12px 18px;border-radius:12px;
  font:600 14px/1 var(--pw-sans);letter-spacing:.01em;
  transition:transform .2s var(--pw-ease),box-shadow .2s var(--pw-ease),background-color .2s var(--pw-ease),color .2s var(--pw-ease);
}
.paywall-btn-primary{
  background:linear-gradient(180deg,var(--pw-lantern-strong),var(--pw-lantern));
  color:#2a1608;box-shadow:0 12px 30px -10px rgba(232,168,101,.6);
}
.paywall-btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 40px -12px rgba(232,168,101,.75)}
.paywall-btn-ghost{
  background:transparent;color:rgba(237,232,221,.7);
  border:1px solid var(--pw-line);
}
.paywall-btn-ghost:hover{color:var(--pw-moon);border-color:var(--pw-line-strong)}

/* Nút "chuyển đến ngân hàng" chỉ xuất hiện trên mobile */
.paywall-mobile-only{display:none}
@media (max-width:640px){
  .paywall-overlay{
    align-items:flex-start;
    padding:10px 10px calc(14px + env(safe-area-inset-bottom));
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(6,14,18,.96);
  }
  .paywall-card{
    margin:auto 0;
    padding:18px 16px 14px;
    max-height:min(95dvh, 660px);
  }
  .paywall-lantern{
    width:38px;height:38px;margin-bottom:8px;
  }
  .paywall-title{
    font-size:clamp(17px, 4.5vw, 20px);
    margin:4px 0 6px;
  }
  .paywall-desc{
    font-size:12.5px;line-height:1.45;
    margin-bottom:10px;
  }
  .paywall-mobile-only{display:inline-flex;justify-content:center}
  .paywall-qr{
    width:160px;height:160px;margin:0 auto;
  }
  .paywall-qr img{
    width:100%;height:100%;object-fit:contain;
  }
  .paywall-info{
    padding:9px 12px;
    margin-top:2px;
    gap:5px;
    font-size:12px;
  }
  .paywall-actions{
    margin-top:10px;
    padding-top:8px;
    gap:8px;
  }
  .paywall-btn{
    padding:11px 16px;
    font-size:13.5px;
  }
}

/* Tôn trọng người dùng thích chuyển động ít */
@media (prefers-reduced-motion:reduce){
  .paywall-lantern,.paywall-spinner,.paywall-flare,.paywall-card{animation:none!important}
  .paywall-veil{filter:none;opacity:.55}
}