/* ===== Base Card & Text ===== */

body {
  background:
    radial-gradient(1200px 600px at 50% -150px, rgba(57,73,171,.06), transparent 60%),
    #f9fafb;
}

@media (max-width: 992px) {
  #navReaderSelect, #spreadSelect { min-width: 160px !important; }
}
@media (max-width: 768px) {
  .navbar .form-label { display: none; }        /* hide labels */
  #navReaderSelect, #spreadSelect { min-width: 140px !important; }
}


/* Only apply hover effects on devices that support hover */
@media (hover: hover) and (pointer: fine) {
  .card-frame {
    transition: transform .18s ease, box-shadow .18s ease;
    will-change: transform;
  }
  .card-frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px -10px rgba(0,0,0,.25);
  }
}

/* Ensure jiggle/aura don’t cancel hover transform */
.tarot-card.jiggle,
.tarot-card.aura-pulse {
  /* animation applies to the .tarot-card element itself,
     not the .card-frame wrapper that lifts on hover */
}

/* If you previously set overflow hidden somewhere, keep the shadow visible */
.card-frame { overflow: visible; }

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1080;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.1);
}


.card-frame{
  background:var(--bs-tertiary-bg, #0f1327);
  border:1px solid rgba(128,138,167,.35);
  border-radius:14px;
  padding:10px;
  height:100%;
}
.slot-title{ color:var(--bs-secondary-color,#9ba6d1); font-size:.9rem; margin-top:.25rem; }
.meaning{ color:var(--bs-body-color,#e4e9ff); font-size:.95rem; }
.meaning:empty{ display:none; }

/* ===== Tarot visuals ===== */
.tarot-card{
  position:relative; width:100%; aspect-ratio:120/190;
  border-radius:10px; border:1px solid rgba(128,138,167,.35);
  background:var(--bs-body-bg,#121733); overflow:hidden;
}
.tarot-card .card-face, .tarot-card .card-back{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  transition:opacity .35s ease, transform .35s ease;
  backface-visibility:hidden;
  will-change: transform, opacity; /* crisper flip/jiggle on some GPUs */
}
.tarot-card.face-down .card-back{ opacity:1; }
.tarot-card.face-down .card-face{ opacity:0; transform:scale(.98); }
.tarot-card.upr .card-back{ opacity:0; }
.tarot-card.upr .card-face{ opacity:1; transform:rotate(0deg); }
.tarot-card.rev .card-back{ opacity:0; }
.tarot-card.rev .card-face{ opacity:1; transform:rotate(180deg); }

/* Subtle jiggle during shuffle */
@keyframes subtleJiggle {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(1deg) scale(1.02); }
  50%  { transform: rotate(-1deg) scale(1.03); }
  75%  { transform: rotate(1deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

.tarot-card.jiggle {
  animation: subtleJiggle 0.8s ease-in-out;
}

@keyframes auraPulse {
  0%   { box-shadow: 0 0 0 0 var(--aura-color, rgba(255,255,255,0.6)); opacity: 1; }
  40%  { box-shadow: 0 0 20px 10px var(--aura-color, rgba(255,255,255,0.4)); opacity: 0.9; }
  100% { box-shadow: 0 0 40px 25px transparent; opacity: 0; }
}

.tarot-card.aura-pulse {
  animation: auraPulse 1.2s ease-out;
}

/* Learn link (use theme vars for light/dark harmony) */
.learn-link{ color: var(--bs-link-color, #63c3ff); text-decoration:none; }
.learn-link:hover{ text-decoration:underline; }

/* ===== Celtic Cross layout ===== */
.celtic-grid{ display:grid; gap:12px; grid-template-columns:repeat(6,1fr); align-items:start; }
.celtic-pos-1{  grid-column:2 / span 2; }
.celtic-pos-2{  grid-column:3 / span 2; margin-left:-35%; margin-top:-65%; }
.celtic-pos-3{  grid-column:2 / span 2; }
.celtic-pos-4{  grid-column:2 / span 2; }
.celtic-pos-5{  grid-column:1 / span 2; }
.celtic-pos-6{  grid-column:4 / span 2; }
.celtic-pos-7{  grid-column:6 / span 1; }
.celtic-pos-8{  grid-column:6 / span 1; }
.celtic-pos-9{  grid-column:6 / span 1; }
.celtic-pos-10{ grid-column:6 / span 1; }

/* Mobile-friendly Celtic stack */
@media (max-width: 768px){
  .celtic-grid{
    grid-template-columns: 1fr;
    gap:16px;
  }
  .celtic-grid > [class^="celtic-pos-"]{
    grid-column: auto / auto;
    margin: 0 !important; /* neutralize cross-card offset on mobile */
  }
}

/* ===== Responsive 3-card helpers (optional wrapper) ===== */
.reading-grid, .three-card-grid{
  display:flex; justify-content:center; align-items:flex-start;
  flex-wrap:wrap; gap:1.5rem; margin-top:1rem;
}
.reading-grid .card-frame, .three-card-grid .card-frame{
  flex:0 1 220px; text-align:center;
}
@media (max-width: 768px){
  .reading-grid, .three-card-grid{ flex-direction:column; align-items:center; }
  .reading-grid .card-frame, .three-card-grid .card-frame{ width:85%; max-width:320px; }
}

/* Loading overlay */
.loading-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:saturate(120%) blur(2px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:1052; /* above backdrop (1050), below modal (1055) */
}
.loading-overlay .spinner-border{ width:2.5rem; height:2.5rem; }
.loading-overlay.show{ opacity:1; pointer-events:auto; }

/* Correct stacking so modal is clickable */
.modal-backdrop { z-index: 1050 !important; }
.modal          { z-index: 1055 !important; }

#readingMeta {
  text-align: center;
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* show a small color square on each <option> row */
#navReaderSelect option,
#readerSelect option {
  padding-left: 24px !important;
  background-repeat: no-repeat !important;
  background-size: 12px 12px !important;
  background-position: 6px center !important;
}

/* make sure the select keeps room for the left swatch when closed */
#navReaderSelect,
#readerSelect {
  padding-left: 2rem; /* space for the swatch */
  background-repeat: no-repeat, no-repeat;
  /* 1st img = swatch, 2nd = default caret (Bootstrap) */
  background-position: 0.75rem center, right 0.75rem center;
  background-size: 0.75rem 0.75rem, 16px 12px;
}

.navbar-logo {
  height: 34px;
  width: 34px;
  border-radius: 50%;
  object-fit: cover;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

/* Soft indigo aura hover */
.navbar-logo:hover {
  box-shadow: 0 0 10px 4px rgba(57, 73, 171, 0.4), 
              0 0 20px 8px rgba(57, 73, 171, 0.2);
  transform: scale(1.05);
}
.navbar { padding-block: .35rem; }
#aiControlsRow, #readingMeta { margin-top: .75rem; }
.container.container--narrow { max-width: 1040px; }


#grid { row-gap: 1.25rem; }
.card-frame {
  background: #fff; border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px; padding: .75rem .75rem 1rem;
}
.tarot-card { border-radius: 10px; overflow: hidden; }
.slot-title { font-weight: 600; }
.h6 { font-weight: 600; letter-spacing: .2px; }
.meaning { color: #555; line-height: 1.45; }

:root { --chakra: #7CB342; } /* default */
a, .link { color: var(--chakra); }
.btn-outline-primary { border-color: var(--chakra); color: var(--chakra); }
.btn-outline-primary:hover { background: color-mix(in oklab, var(--chakra) 12%, white); }
.badge-chakra { background: color-mix(in oklab, var(--chakra) 16%, white); color: #222; }
.card-frame { transition: box-shadow .25s ease, transform .15s ease; }
.card-frame:hover { box-shadow: 0 6px 28px -10px color-mix(in oklab, var(--chakra) 35%, black); transform: translateY(-1px); }

#aiReportOutput h1, #aiReportOutput h2 { margin-top: 1.25rem; font-weight: 700; }
#aiReportOutput .lead { color: #444; font-size: 1.05rem; }
#aiReportOutput { max-width: 70ch; }


.reading-report-panel { margin-top: 1.25rem; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; }
.reading-report-panel.hidden { display: none; }
.reading-report-panel .report-title { margin: 0 0 .5rem 0; font-size: 1.125rem; font-weight: 600; }
.reading-report-panel .reading-report :is(h1,h2,h3) { margin-top: 1rem; }

/* Tarot Report */
.tarot-report { border:1px solid var(--bs-border-color, #e5e7eb); border-radius:.75rem; padding:1rem; }
.tarot-report .tr-meta { display:flex; flex-wrap:wrap; gap:.5rem .75rem; margin-bottom:.75rem; }
.tarot-report .tr-chip { display:flex; gap:.5rem; align-items:baseline; background:var(--bs-tertiary-bg, #f8f9fa); border:1px solid var(--bs-border-color, #e5e7eb); border-radius:999px; padding:.35rem .65rem; }
.tarot-report .tr-k { color:var(--bs-secondary-color,#6c757d); font-size:.825rem; }
.tarot-report .tr-v { font-weight:600; font-size:.9rem; }

.tarot-report .tr-cards { display:flex; flex-direction:column; gap:.75rem; }
.tarot-report .tr-card { padding:.75rem; border:1px solid var(--bs-border-color,#e5e7eb); border-radius:.65rem; background:var(--bs-body-bg,#fff); }
.tarot-report .tr-pos-title { margin:0 0 .125rem 0; font-size:.95rem; font-weight:700; }
.tarot-report .tr-pos-desc { margin:0 0 .4rem 0; font-size:.85rem; color:var(--bs-secondary-color,#6c757d); }
.tarot-report .tr-card-name { font-weight:600; margin-bottom:.25rem; }
.tarot-report .tr-summary { line-height:1.5; }
.tarot-report .tr-muted { color:var(--bs-secondary-color,#6c757d); }