/* Tarot Experience — PLJ/PLR-style clean UI */

.tarotx-wrap{max-width:780px;margin:32px auto;padding:0 16px;color:#1c1026;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}
.tarotx-card{background:#F5EFFF;border:1px solid #C9A8FF;border-radius:18px;padding:22px;box-shadow:none;}
.tarotx-header{background:transparent;color:inherit;text-align:left;padding:0;margin:0 0 10px;}
.tarotx-header h2{margin:0 0 10px;font-size:24px;font-weight:800;letter-spacing:.02em;color:#2A1240;}
.tarotx-header p{margin:0 0 18px;color:#4B2A68;line-height:1.65;font-size:14pt;opacity:1;}
.tarotx-body{padding:0;background:transparent;}

.tarotx-label{display:block;margin:0 0 8px;font-size:15px;font-weight:800;color:#2A1240;}
.tarotx-input,.tarotx-textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;border:1px solid #C9A8FF;background:#fff;font-size:14px;}
.tarotx-textarea{min-height:120px;resize:vertical;}

.tarotx-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media (max-width:820px){
  .tarotx-row{grid-template-columns:1fr;}
  .tarotx-grid{grid-template-columns:repeat(3,110px);}
}}

.tarotx-error{color:#c81e1e;font-weight:800;margin:0 0 10px;}
.tarotx-note{color:#4B2A68;font-size:14px;line-height:1.5;margin:8px 0 0;}

.tarotx-btn{background:#299ED2;color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:800;font-size:15px;cursor:pointer;}
.tarotx-btn:hover{filter:brightness(.95);}
.tarotx-subbtn{background:#fff;color:#2A1240;border:1px solid #C9A8FF;border-radius:12px;padding:12px 16px;font-weight:800;font-size:15px;cursor:pointer;}
.tarotx-subbtn:hover{background:#F0E7FF;}

.tarotx-progress{height:8px;background:rgba(0,0,0,.08);border-radius:999px;overflow:hidden;margin:10px 0 14px;}
#tarotxProgFill{height:100%;width:0%;background:#299ED2;transition:width .25s ease;}

.tarotx-positions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px;}
.tarotx-pill{background:#fff;border:1px solid #C9A8FF;color:#2A1240;border-radius:999px;padding:7px 10px;font-size:14px;font-weight:700;}

.tarotx-grid{
  display:grid;
  grid-template-columns:repeat(6,110px);
  gap:12px;
  justify-content:center;
  justify-items:center;
}
@media (max-width:820px){.tarotx-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

.tarotx-cardback{
  width:110px;
  height:170px;
  border-radius:14px;
  border:1px solid #C9A8FF;
  background-image:url("tarot-back-v3.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

/* ==========================================================
   Success / Info popup (center message)
   ========================================================== */

#tarotxCenterMsg{
  position: fixed;
  inset: 0;
  display: none; /* JS toggles to flex */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 999999;
  padding: 18px;
}

/* fade-in */
#tarotxCenterMsg.tarotx-show{ animation: tarotxFadeIn .25s ease-out both; }

@keyframes tarotxFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.tarotx-msg-box{
  width: min(560px, 92vw);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  border: 1px solid rgba(41,158,210,0.35);
  overflow: hidden;
}

.tarotx-msg-title{
  background: #299ED2;
  color: #fff;
  padding: 14px 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
}

.tarotx-msg-body{
  padding: 18px 18px 16px;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.35;
}

.tarotx-msg-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 0 18px 18px;
  flex-wrap: wrap;
}

.tarotx-msg-actions a,
.tarotx-msg-actions button{
  appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #299ED2;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.tarotx-msg-actions a:hover,
.tarotx-msg-actions button:hover{
  background: #1F86B3;
}

@media (max-width: 480px){
  .tarotx-msg-box{ width: 94vw; }
  .tarotx-msg-actions a,
  .tarotx-msg-actions button{ width: 100%; }
}
.tarotx-cardback:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.14);}
.tarotx-cardback.selected{opacity:.5;filter:grayscale(.2);}

.tarotx-cardface{
  height:140px;
  border-radius:14px;
  border:1px solid #C9A8FF;
  background:#fff;
  overflow:hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.tarotx-cardface img{width:100%;height:100%;object-fit:cover;display:block;}

.tarotx-paybox{margin-top:14px;padding:14px;border:1px solid #C9A8FF;border-radius:14px;background:#fff;}
.tarotx-success{padding:12px 14px;border:1px solid #8DECC8;background:#ECFDF5;color:#065F46;border-radius:14px;font-weight:800;}

.tarotx-centerMsg{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:99999;}
.tarotx-centerMsg .box{width:min(520px,calc(100% - 24px));background:#fff;border-radius:16px;padding:16px 16px 14px;box-shadow:0 16px 40px rgba(0,0,0,.25);text-align:center;}
.tarotx-centerMsg h3{margin:0 0 8px;font-size:18px;}
.tarotx-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;}

/* PLJ-style payment box (bottom of form) */
.tarotx-paybox{
  background: #f4edff;
  border: 2px solid #d7c6ff;
  border-radius: 18px;
  padding: 18px 18px 16px;
  margin-top: 16px;
}
.tarotx-payhead{ text-align:center; }
.tarotx-paytitle{
  font-weight: 800;
  color:#4c1d95;
  margin-bottom: 8px;
}
.tarotx-payhint{
  color:#4c1d95;
  opacity:.9;
  margin-bottom: 12px;
  font-size: .95rem;
}
.tarotx-payfield{ max-width: 640px; margin: 0 auto 14px; }
.tarotx-payactions{ text-align:center; }
.tarotx-btn-pill{
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-size: 1.05rem !important;
  background:#7c3aed !important;
}
.tarotx-btn-pill:hover{ background:#6d28d9 !important; }
.tarotx-paynote{ text-align:center; margin-top:10px; font-weight:700; }
.tarotx-payfoot{
  text-align:center;
  margin-top: 10px;
  color:#4c1d95;
  opacity:.9;
  font-size: .88rem;
}


/* v0.3.6: Force Reveal button centered */
.tarotx-reveal-wrap{ width:100%; text-align:center !important; }
#tarotxRevealBtn{ display:inline-block !important; margin: 0 auto !important; }


/* v0.3.7: Hard-force Reveal button centering (theme overrides safe) */
.tarotx-reveal-wrap{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px;
  text-align:center !important;
  clear:both !important;
}
#tarotxRevealBtn{
  float:none !important;
  position:relative !important;
  left:0 !important;
  right:0 !important;
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ==========================================================
   Success / Info popup (center message)
   ========================================================== */

#tarotxCenterMsg{
  position: fixed;
  inset: 0;
  display: none; /* JS toggles to flex */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 999999;
  padding: 18px;
}

#tarotxCenterMsg.is-visible{
  display: flex;
  animation: tarotxFadeIn 220ms ease-out;
}

#tarotxCenterMsg.is-hiding{
  animation: tarotxFadeOut 220ms ease-out;
}

@keyframes tarotxFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes tarotxFadeOut{
  from{ opacity: 1; }
  to{ opacity: 0; }
}

#tarotxCenterMsg .tarotx-msg-box{
  width: min(520px, 96vw);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.25);
  border: 2px solid rgba(124,58,237,0.25);
  padding: 18px 18px 14px;
  text-align: center;
}

#tarotxCenterMsg .tarotx-msg-title{
  font-weight: 800;
  font-size: 1.35rem;
  margin: 6px 0 6px;
  color: #2b1b58;
}

#tarotxCenterMsg .tarotx-msg-body{
  margin: 0 0 14px;
  color: #3a2b6b;
  font-size: 1rem;
  line-height: 1.35;
}

#tarotxCenterMsg .tarotx-msg-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#tarotxCenterMsg .tarotx-msg-actions a,
#tarotxCenterMsg .tarotx-msg-actions button{
  appearance: none;
  border: 0;
  text-decoration: none;
}

#tarotxCenterMsg .tarotx-msg-actions .tarotx-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  background: #299ED2;
  color: #fff;
}

#tarotxCenterMsg .tarotx-msg-actions .tarotx-btn:hover{
  background: #1F86B3;
}

#tarotxCenterMsg .tarotx-msg-actions .tarotx-btn.secondary{
  background: #7c3aed;
}

#tarotxCenterMsg .tarotx-msg-actions .tarotx-btn.secondary:hover{
  background: #6d28d9;
}

@media (max-width: 520px){
  #tarotxCenterMsg{ padding: 12px; }
  #tarotxCenterMsg .tarotx-msg-box{ padding: 16px 14px 12px; }
  #tarotxCenterMsg .tarotx-msg-title{ font-size: 1.22rem; }
}

/* --- Shuffle animation (cosmetic) --- */
.tarotx-shuffling .tarotx-cardback{
  animation: tarotxShuffleJitter 220ms ease-in-out infinite alternate;
}

/* Stagger the effect slightly across cards */
.tarotx-shuffling .tarotx-cardback:nth-child(3n){ animation-delay: 40ms; }
.tarotx-shuffling .tarotx-cardback:nth-child(3n+1){ animation-delay: 80ms; }
.tarotx-shuffling .tarotx-cardback:nth-child(5n){ animation-delay: 120ms; }

@keyframes tarotxShuffleJitter{
  from{ transform: translate3d(-3px, 0, 0) rotate(-1.2deg); }
  to{ transform: translate3d(3px, -2px, 0) rotate(1.2deg); }
}

.tarotx-shuffle-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(1.5px);
  border-radius: 14px;
  z-index: 20;
  transition: opacity 200ms ease;
}

.tarotx-shuffle-badge{
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(124,58,237,0.92);
  color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}