/* ==========================================================================
   Mystic Widgets Pro — Tarot Widget  v1.0.2
   ALL color / font-family / font-size declarations use !important to prevent
   WordPress theme CSS from overriding widget styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Box-sizing reset — scoped only to widget children
   -------------------------------------------------------------------------- */
.mystic-tarot-widget *,
.mystic-tarot-widget *::before,
.mystic-tarot-widget *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Widget container
   -------------------------------------------------------------------------- */
.mystic-tarot-widget {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 16px !important;
  color: #f5f0e8 !important;
  line-height: 1.5 !important;
  padding: 44px 24px 80px !important;
  position: relative !important;
  border-radius: 16px !important;
  background: radial-gradient(ellipse at 50% 0%, #2a1660 0%, #0f0a2e 55%, #0d0a1a 100%) !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
}

/* Starfield */
.mystic-tarot-widget::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,.6)  0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,.4)  0%, transparent 100%),
    radial-gradient(1px 1px at 40%  8%, rgba(255,255,255,.5)  0%, transparent 100%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.6)  0%, transparent 100%),
    radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,.4)  0%, transparent 100%),
    radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,.3)  0%, transparent 100%),
    radial-gradient(2px 2px at 15% 50%, rgba(201,168,76,.25)  0%, transparent 100%),
    radial-gradient(2px 2px at 80% 35%, rgba(201,168,76,.2)   0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.mystic-tarot-widget > * {
  position: relative !important;
  z-index: 1 !important;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.mystic-tarot-widget .tw-header {
  text-align: center !important;
  margin-bottom: 36px !important;
}

.mystic-tarot-widget .tw-ornament {
  color: #c9a84c !important;
  font-size: 18px !important;
  font-family: 'EB Garamond', serif !important;
  letter-spacing: 8px !important;
  margin-bottom: 14px !important;
  display: block !important;
  opacity: .8 !important;
}

.mystic-tarot-widget .tw-h1 {
  font-family: 'Cinzel', serif !important;
  font-size: clamp(22px, 4vw, 36px) !important;
  font-weight: 700 !important;
  color: #f5f0e8 !important;
  letter-spacing: 2px !important;
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.7), 0 0 40px rgba(201,168,76,.35) !important;
  display: block !important;
}

.mystic-tarot-widget .tw-subtitle {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #ccc5bb !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  display: block !important;
}

.mystic-tarot-widget .tw-subtitle strong {
  color: #e8c97a !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Progress bar
   -------------------------------------------------------------------------- */
.mystic-tarot-widget .tw-progress-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}

.mystic-tarot-widget .tw-progress-bg {
  flex: 1 !important;
  height: 4px !important;
  background: rgba(255,255,255,.1) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}

.mystic-tarot-widget .tw-progress-fill {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, #8b6914, #e8c97a) !important;
  border-radius: 2px !important;
  transition: width .4s cubic-bezier(.4,0,.2,1) !important;
}

.mystic-tarot-widget .tw-progress-count {
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e8c97a !important;
  min-width: 40px !important;
  text-align: right !important;
  letter-spacing: 1px !important;
}

/* --------------------------------------------------------------------------
   Action buttons — pill shape
   -------------------------------------------------------------------------- */
.mystic-tarot-widget .tw-actions {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
  flex-wrap: wrap !important;
}

.mystic-tarot-widget .tw-btn {
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  padding: 10px 22px !important;
  border-radius: 40px !important;
  cursor: pointer !important;
  border: 1px solid rgba(201,168,76,.45) !important;
  transition: all .25s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: none !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.mystic-tarot-widget .tw-btn-shuffle {
  background: rgba(201,168,76,.14) !important;
  color: #e8c97a !important;
}

.mystic-tarot-widget .tw-btn-shuffle:hover {
  background: rgba(201,168,76,.26) !important;
  color: #f0d98a !important;
}

.mystic-tarot-widget .tw-btn-restart {
  background: transparent !important;
  color: rgba(245,240,232,.6) !important;
  border-color: rgba(255,255,255,.15) !important;
}

.mystic-tarot-widget .tw-btn-restart:hover {
  color: #f5f0e8 !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* --------------------------------------------------------------------------
   Section label — with decorative lines
   -------------------------------------------------------------------------- */
.mystic-tarot-widget .tw-section-label {
  text-align: center !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  color: #c9a84c !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
}

.mystic-tarot-widget .tw-section-label::before,
.mystic-tarot-widget .tw-section-label::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.45), transparent) !important;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */
.mystic-tarot-widget .tw-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 44px !important;
}

/* --------------------------------------------------------------------------
   Card deal animation
   -------------------------------------------------------------------------- */
@keyframes twCardDeal {
  0%   { opacity: 0; transform: translateY(-40px) rotateY(90deg) scale(.7); }
  60%  { transform: translateY(4px) rotateY(-8deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotateY(0deg) scale(1); }
}

.mystic-tarot-widget .tw-card-wrap {
  perspective: 800px !important;
}

.mystic-tarot-widget .tw-card-wrap.dealing {
  animation: twCardDeal .45s cubic-bezier(.22,1,.36,1) both !important;
}

/* --------------------------------------------------------------------------
   Card flip
   -------------------------------------------------------------------------- */
.mystic-tarot-widget .tw-card {
  width: 100% !important;
  aspect-ratio: 2 / 3.5 !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  transition: transform .55s cubic-bezier(.4,0,.2,1) !important;
  cursor: pointer !important;
  border-radius: 10px !important;
}

.mystic-tarot-widget .tw-card.flipped {
  transform: rotateY(180deg) !important;
  pointer-events: none !important;
  cursor: default !important;
}

.mystic-tarot-widget .tw-card:not(.flipped):hover {
  transform: translateY(-8px) scale(1.06) !important;
  filter:
    drop-shadow(0 0 12px rgba(201,168,76,.9))
    drop-shadow(0 0 28px rgba(201,168,76,.6))
    drop-shadow(0 16px 32px rgba(0,0,0,.5)) !important;
}

.mystic-tarot-widget .tw-card-face {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 10px !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: hidden !important;
}

/* Card back */
.mystic-tarot-widget .tw-card-back {
  background: #1a0f3c !important;
  border: 2px solid rgba(201,168,76,.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.mystic-tarot-widget .tw-card-back::before {
  content: '' !important;
  position: absolute !important;
  inset: 6px !important;
  border: 1px solid rgba(201,168,76,.25) !important;
  border-radius: 6px !important;
  pointer-events: none !important;
}

.mystic-tarot-widget .tw-eye {
  width: 46px !important;
  height: 46px !important;
  opacity: .85 !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

/* Card front */
.mystic-tarot-widget .tw-card-front {
  transform: rotateY(180deg) !important;
  background: #1a1020 !important;
  border: 2px solid #c9a84c !important;
  box-shadow: 0 0 20px rgba(201,168,76,.3) !important;
}

.mystic-tarot-widget .tw-card-front img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}

.mystic-tarot-widget .tw-card-label {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 60%, transparent 100%) !important;
  padding: 24px 6px 7px !important;
  text-align: center !important;
  font-family: 'Cinzel', serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  color: #f0d98a !important;
  z-index: 1 !important;
  line-height: 1.3 !important;
}

/* Badge — top LEFT */
.mystic-tarot-widget .tw-badge {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #c9a84c !important;
  color: #0d0a1a !important;
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

/* --------------------------------------------------------------------------
   Reading section
   -------------------------------------------------------------------------- */
.mystic-tarot-widget .tw-reading {
  display: none !important;
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity .6s ease, transform .6s ease !important;
}

.mystic-tarot-widget .tw-reading.visible {
  display: block !important;
}

.mystic-tarot-widget .tw-reading.animate {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Divider */
.mystic-tarot-widget .tw-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.4), transparent) !important;
  margin: 40px 0 !important;
  border: none !important;
}

/* Reading title */
.mystic-tarot-widget .tw-reading-title {
  text-align: center !important;
  margin-bottom: 32px !important;
}

.mystic-tarot-widget .tw-reading-title h2 {
  font-family: 'Cinzel', serif !important;
  font-size: clamp(20px, 4vw, 30px) !important;
  font-weight: 700 !important;
  color: #f5f0e8 !important;
  letter-spacing: 2px !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.6) !important;
}

.mystic-tarot-widget .tw-reading-title p {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #b8b2aa !important;
  font-size: 16px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   Result grid — vertical card layout
   -------------------------------------------------------------------------- */
.mystic-tarot-widget .tw-result-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 48px !important;
}

@keyframes twCardAppear {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mystic-tarot-widget .tw-result-card {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(201,168,76,.3) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform .25s, box-shadow .25s !important;
  animation: twCardAppear .5s ease both !important;
}

.mystic-tarot-widget .tw-result-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
}

.mystic-tarot-widget .tw-result-img {
  position: relative !important;
  height: 180px !important;
  overflow: hidden !important;
}

.mystic-tarot-widget .tw-result-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
  display: block !important;
}

.mystic-tarot-widget .tw-result-num {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #c9a84c !important;
  color: #0d0a1a !important;
  font-family: 'Cinzel', serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mystic-tarot-widget .tw-result-body {
  padding: 16px 18px 20px !important;
}

.mystic-tarot-widget .tw-result-icon {
  font-size: 22px !important;
  margin-bottom: 6px !important;
  display: block !important;
  line-height: 1 !important;
}

.mystic-tarot-widget .tw-result-name {
  font-family: 'Cinzel', serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e8c97a !important;
  margin-bottom: 10px !important;
  letter-spacing: .5px !important;
  line-height: 1.3 !important;
  display: block !important;
}

.mystic-tarot-widget .tw-result-text {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  color: #ddd8d0 !important;
  margin: 0 !important;
  display: block !important;
}

/* --------------------------------------------------------------------------
   CTA — pill shape + pulse animation
   -------------------------------------------------------------------------- */
@keyframes twPulse {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(124,58,237,.55),
                0 0 0   0   rgba(201,168,76,0),
                0 0 60px    rgba(201,168,76,.15);
  }
  50% {
    box-shadow: 0 8px 48px rgba(124,58,237,.75),
                0 0 0   6px rgba(201,168,76,.12),
                0 0 80px    rgba(201,168,76,.3);
  }
}

.mystic-tarot-widget .tw-cta-wrap {
  text-align: center !important;
  margin-top: 8px !important;
  margin-bottom: 48px !important;
  padding: 0 !important;
}

.mystic-tarot-widget .tw-btn-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  color: #fff !important;
  font-family: 'Cinzel', serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  padding: 18px 44px !important;
  border-radius: 60px !important;
  border: 2px solid rgba(201,168,76,.6) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform .3s, border-color .3s !important;
  animation: twPulse 2.5s ease-in-out infinite !important;
  line-height: 1 !important;
}

.mystic-tarot-widget .tw-btn-cta:hover,
.mystic-tarot-widget .tw-btn-cta:focus {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: #c9a84c !important;
  color: #fff !important;
  text-decoration: none !important;
  outline: none !important;
}

.mystic-tarot-widget .tw-btn-cta:visited {
  color: #fff !important;
}

.mystic-tarot-widget .tw-btn-cta-sub {
  display: block !important;
  margin-top: 12px !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: #9e9890 !important;
  line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .mystic-tarot-widget .tw-card-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }

  .mystic-tarot-widget .tw-result-grid {
    grid-template-columns: 1fr !important;
  }

  .mystic-tarot-widget {
    padding: 32px 16px 60px !important;
  }

  .mystic-tarot-widget .tw-h1 {
    font-size: clamp(20px, 5.5vw, 28px) !important;
  }

  .mystic-tarot-widget .tw-btn-cta {
    padding: 16px 28px !important;
    font-size: 13px !important;
  }
}