/* ---------------------------------------------------------------
   Homepage: payment options + gift vouchers (includes/pay-gift.php).
   Two dark cards with soft light — the same look as the closing
   card on the Tropic page. Loaded only on the homepage.
   --------------------------------------------------------------- */
.pg{padding-top:0}
.pg-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);align-items:stretch;
}
.pg-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(1.75rem,3.5vw,2.75rem) clamp(1.5rem,3.5vw,2.75rem);
  border-radius:18px;color:#F3F0F2;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(203,158,187,.30) 0%, rgba(203,158,187,0) 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(227,204,200,.14) 0%, rgba(227,204,200,0) 65%),
    linear-gradient(135deg,#1C1621 0%,#110E16 55%,#18121C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 50px -28px rgba(38,32,42,.55);
}
/* the gift card takes its glow from the other corner */
.pg-card-gift{
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(203,158,187,.30) 0%, rgba(203,158,187,0) 60%),
    radial-gradient(50% 70% at 100% 100%, rgba(227,204,200,.14) 0%, rgba(227,204,200,0) 65%),
    linear-gradient(225deg,#1C1621 0%,#110E16 55%,#18121C 100%);
}
.pg-card::before{
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(243,240,242,.35),transparent);
}
[data-theme="dark"] .pg-card{border:1px solid var(--line)}

.pg-card .pg-eyebrow{
  margin:0 0 .5rem;font-size:.78rem;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:#CB9EBB;
}
.pg-title{
  margin:0 0 1rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.2;letter-spacing:-.02em;color:#F3F0F2;
}
.pg-card p{margin:0 0 .8rem;font-size:.95rem;line-height:1.65;color:rgba(243,240,242,.78)}
.pg-card .pg-lead{color:#F3F0F2;font-weight:500}
.pg-card .pg-note{margin-top:.2rem;font-size:.8rem;color:rgba(243,240,242,.55)}

.pg-methods{list-style:none;margin:.3rem 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.pg-methods li{
  padding:.35rem .85rem;border-radius:100px;font-size:.82rem;font-weight:500;
  color:#F3F0F2;background:rgba(243,240,242,.08);border:1px solid rgba(243,240,242,.18);
}

.pg-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:1rem}
.pg-actions .ico{width:17px;height:17px}
.pg .pg-main{background:#F3F0F2;color:#26202A}
.pg .pg-main:hover{background:#6E4F63;color:#F3F0F2}
.pg .pg-line{border-color:rgba(243,240,242,.32);color:#F3F0F2}
.pg .pg-line:hover{background:#F3F0F2;color:#26202A;border-color:#F3F0F2}

@media (max-width:860px){
  .pg-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pg-actions .btn{flex:1 1 auto}
}

/* ---------------------------------------------------------------
   Before & after: every card is the same square, whatever shape the
   photos are. Each photo is shown whole (never cropped), centred on a
   soft, blurred copy of itself that fills the rest of the square.
   --------------------------------------------------------------- */
.ba .ba-card{
  --ba-ar:1 !important;
  --ba-sq:min(96cqh, 440px, 82cqw);
  left:50%;top:50%;
  width:var(--ba-sq);height:var(--ba-sq);
  margin-left:calc(var(--ba-sq) / -2);margin-top:calc(var(--ba-sq) / -2);
}
.ba-layer{position:absolute;inset:0;overflow:hidden}
.ba-before{overflow:hidden}
.ba .ba-bg{
  position:absolute;inset:-12%;width:124%;height:124%;
  object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;
  filter:blur(22px) saturate(1.15) brightness(.82);
}
.ba .ba-img{object-fit:contain}
/* the drum only needs to be as tall as the squares, not the whole screen */
.ba .ba-stage{height:min(480px, calc(100svh - 170px))}
@media (orientation:portrait){
  .ba .ba-stage{height:min(90vw, 480px)}
}