/* ==========================================================================
   CardAstrology — Vedic card selection engine
   Deck: 12 red + 48 blue + 12 yellow = 72 tiles, shuffled into one grid.
   Root font-size is 62.5%, so 1rem = 10px (matches new-style.css).
   ========================================================================== */

.card-reading-wrap {
  --tile-red:    #b3272d;
  --tile-blue:   #23479c;
  --tile-yellow: #c9a227;
}

/* ---------- Question echo ---------- */
.cr-question {
  background: var(--primary-bg);
  border: 1px solid var(--primary-light);
  border-left: 5px solid var(--primary);
  border-radius: .8rem;
  padding: 1.8rem 2.2rem;
  margin-bottom: 2.5rem;
}
.cr-question .cr-q-label {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .5rem;
}
.cr-question .cr-q-text {
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- Guide / instruction bar ---------- */
.cr-guide {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--primary);
  color: #fff;
  border-radius: .8rem;
  padding: 1.5rem 2.2rem;
  margin-bottom: 2.5rem;
  font-size: 1.8rem;
  font-weight: 600;
  min-height: 6rem;
}
.cr-guide i { color: var(--secondary); font-size: 2rem; flex: 0 0 auto; }
.cr-guide.is-done { background: var(--primary-darker); }
.cr-guide .cr-step {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 1.4rem;
  font-weight: 600;
  opacity: .85;
  white-space: nowrap;
}

/* ---------- Deck grid ---------- */
.cr-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: .9rem;
  margin-bottom: 3rem;
}
.cr-tile {
  aspect-ratio: 91 / 134;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .6rem;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  cursor: default;
  user-select: none;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.cr-tile.red    { background: var(--tile-red); }
.cr-tile.blue   { background: var(--tile-blue); }
.cr-tile.yellow { background: var(--tile-yellow); color: #3a2c00; }

/* Only the currently-active colour is clickable */
.cr-tile.is-active { cursor: pointer; }
.cr-tile.is-active:hover,
.cr-tile.is-active:focus-visible {
  transform: translateY(-.6rem) scale(1.06);
  box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.3);
  outline: none;
  border-color: var(--secondary);
}
.cr-tile.is-idle { opacity: .38; filter: grayscale(.35); }

/* ---------- Picked rows ---------- */
.cr-rows { display: flex; flex-direction: column; gap: 1.6rem; }
.cr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: .8rem;
  min-height: 8rem;
}
.cr-row.is-current { border-color: var(--secondary); background: var(--secondary-light); }
.cr-row-label {
  flex: 0 0 auto;
  min-width: 8.5rem;     /* was a fixed width, and "YOUR CARDS" broke over two lines (UX review #23) */
  white-space: nowrap;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
}
.cr-row-cards { display: flex; flex-wrap: wrap; gap: .8rem; }
.cr-picked {
  width: 6.1rem;
  border-radius: .5rem;
  box-shadow: 0 2px 8px var(--card-shadow);
  animation: cr-flip .4s ease;
  background: #fff;
}
.cr-picked.is-yellow { box-shadow: 0 0 0 2px var(--secondary), 0 2px 8px var(--card-shadow); }
@keyframes cr-flip {
  from { transform: rotateY(90deg) scale(.8); opacity: 0; }
  to   { transform: rotateY(0)     scale(1);  opacity: 1; }
}
.cr-row-empty { font-size: 1.5rem; color: var(--text-muted); font-style: italic; }

/* ---------- Actions ---------- */
.cr-actions { margin-top: 3rem; text-align: center; }
.cr-actions[hidden] { display: none; }

@media (max-width: 575px) {
  .cr-deck { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .6rem; }
  .cr-tile { font-size: 1.4rem; }
  .cr-guide { font-size: 1.6rem; padding: 1.3rem 1.6rem; flex-wrap: wrap; }
  .cr-guide .cr-step { margin-left: 0; width: 100%; }
  .cr-row-label { width: 100%; }
  .cr-picked { width: 5rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .cr-tile, .cr-picked { transition: none; animation: none; }
}

/* ==========================================================================
   Reading pages — panels, forms, face-down draw, result
   ========================================================================== */

.cr-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  box-shadow: 0 .4rem 2rem var(--card-shadow);
  padding: 3.5rem;
}
.cr-panel + .cr-panel { margin-top: 2.5rem; }
.cr-panel-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: .8rem;
}
.cr-panel-sub { font-size: 1.6rem; color: var(--text-muted); margin-bottom: 3rem; }

/* ---------- form controls ---------- */
.cr-label {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .8rem;
}
.cr-label .req { color: var(--danger); }
.cr-input {
  width: 100%;
  font-size: 1.7rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--light-bg);
  color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cr-input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 .3rem var(--primary-light);
}
textarea.cr-input { resize: vertical; min-height: 11rem; }

/* ---------- category chips ---------- */
.cr-chips { display: flex; flex-wrap: wrap; gap: 1rem; }
.cr-chip { cursor: pointer; margin: 0; }
.cr-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cr-chip span {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 1rem 1.8rem;
  border: 2px solid var(--border);
  border-radius: 5rem;
  color: var(--text-muted);
  background: var(--light-bg);
  transition: all .2s ease;
}
.cr-chip input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.cr-chip input:focus-visible + span { box-shadow: 0 0 0 .3rem var(--primary-light); }
.cr-chip:hover span { border-color: var(--primary); color: var(--primary); }
.cr-chip input:checked + span:hover { color: #fff; }

/* A chip carrying an admin-uploaded category picture. The image sits inside the
   same pill, so a category with a picture and one without still line up. */
.cr-chip-img span {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding-left: .7rem;
}
.cr-chip-img span img {
  width: 3.2rem;
  height: 3.2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

/* ---------- notes ---------- */
.cr-notes {
  margin-top: 2.5rem;
  background: var(--secondary-light);
  border: 1px solid var(--secondary);
  border-radius: 1rem;
  padding: 2.2rem 2.6rem;
}
.cr-notes h4 { font-size: 1.8rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 1.2rem; }
.cr-notes ul { margin: 0; padding-left: 2rem; }
.cr-notes li { font-size: 1.55rem; color: var(--text); line-height: 1.8; }
.cr-notes a { color: var(--primary); font-weight: 600; }

/* ---------- face-down draw ---------- */
.cr-facedown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1.4rem;
  margin-top: 1rem;
}
.cr-facedown {
  aspect-ratio: 91 / 134;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  perspective: 60rem;
}
.cr-facedown-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: .8rem;
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-darker) 100%);
  border: 2px solid var(--secondary);
  box-shadow: 0 .3rem 1rem rgba(0,0,0,.25);
  color: var(--secondary);
  font-size: 2.6rem;
  transition: transform .22s ease, box-shadow .22s ease;
}
.cr-facedown:hover .cr-facedown-inner,
.cr-facedown:focus-visible .cr-facedown-inner {
  transform: translateY(-.8rem) rotate(-2deg);
  box-shadow: 0 1rem 2rem rgba(76,29,118,.4);
}
.cr-facedown:focus-visible { outline: none; }
.cr-facedown:focus-visible .cr-facedown-inner { box-shadow: 0 0 0 .4rem var(--primary-light), 0 1rem 2rem rgba(76,29,118,.4); }

/* ---------- result ---------- */
.cr-result-card { text-align: center; margin: 3rem 0; }
.cr-result-img {
  width: 16rem;
  max-width: 60%;
  border-radius: 1rem;
  box-shadow: 0 .6rem 2.4rem rgba(76,29,118,.28);
}
.cr-result-name {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: .4rem;
  color: var(--primary);
  margin-top: 1.8rem;
}
.cr-result-block { margin-bottom: 2.8rem; }
.cr-result-block h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.cr-result-block h3 i { color: var(--secondary); }
.cr-result-block p { font-size: 1.75rem; line-height: 1.9; color: var(--text); margin: 0; }
.cr-affirmation {
  background: var(--secondary-light);
  border-left: 5px solid var(--secondary);
  border-radius: .8rem;
  padding: 2.2rem 2.6rem;
}
.cr-affirmation p { font-style: italic; }
.cr-result-foot {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
  text-align: center;
}
.cr-result-foot p { font-size: 1.6rem; color: var(--text-muted); }
.cr-ref { font-size: 1.35rem; letter-spacing: .5px; }
.cr-result-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: center;
  margin-top: 2rem;
}

@media (max-width: 575px) {
  .cr-panel { padding: 2.2rem 1.8rem; }
  .cr-panel-title { font-size: 2.3rem; }
  .cr-facedown-grid { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 1rem; }
  .cr-result-name { font-size: 2.5rem; letter-spacing: .25rem; }
  .cr-result-cta .site-btn { width: 100%; justify-content: center; }
}

/* ---------- Ask a Question: question picker ---------- */
.aq-qlist { display: flex; flex-direction: column; gap: .8rem; }
.aq-qlist[hidden] { display: none; }
.aq-q { cursor: pointer; margin: 0; }
.aq-q input { position: absolute; opacity: 0; width: 0; height: 0; }
.aq-q span {
  display: block;
  font-size: 1.6rem;
  line-height: 1.6;
  padding: 1.3rem 1.8rem 1.3rem 4.6rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--light-bg);
  color: var(--text);
  position: relative;
  transition: all .18s ease;
}
.aq-q span::before {
  content: '';
  position: absolute;
  left: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.9rem;
  height: 1.9rem;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: #fff;
  transition: all .18s ease;
}
.aq-q:hover span { border-color: var(--primary); background: #fff; }
.aq-q input:checked + span {
  border-color: var(--primary);
  background: var(--primary-bg);
  font-weight: 600;
}
.aq-q input:checked + span::before {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 .35rem #fff;
}
.aq-q input:focus-visible + span { box-shadow: 0 0 0 .3rem var(--primary-light); }

/* ---------- Price tag & order summary ---------- */
.cr-price-tag {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  background: var(--primary-bg);
  border: 1px dashed var(--primary);
  border-radius: .8rem;
  padding: 1.6rem 2.2rem;
  margin-bottom: 2.5rem;
}
.cr-price-amount { font-size: 3rem; font-weight: 800; color: var(--primary); }
.cr-price-note   { font-size: 1.5rem; color: var(--text-muted); }

.cr-summary { list-style: none; margin: 0; padding: 0; }
.cr-summary li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.6rem;
}
.cr-summary li span   { color: var(--text-muted); }
.cr-summary li strong { color: var(--text); text-align: right; overflow-wrap: anywhere; }
.cr-summary .cr-summary-total { border-bottom: none; padding-top: 1.6rem; }
.cr-summary .cr-summary-total strong { font-size: 2.4rem; color: var(--primary); }

.cr-thanks-icon { font-size: 6rem; color: #1a7f37; margin-bottom: 1.5rem; }

/* ---------- Content page components ---------- */
.cr-query-list { counter-reset: q; list-style: none; margin: 0; padding: 0; }
.cr-query-list li {
  counter-increment: q;
  position: relative;
  padding: 1.2rem 0 1.2rem 4.4rem;
  font-size: 1.7rem;
  line-height: 1.7;
  color: var(--text);
  border-bottom: 1px dashed var(--border);
}
.cr-query-list li:last-child { border-bottom: none; }
.cr-query-list li::before {
  content: counter(q);
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}

/* Service cards */
.cr-service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 .3rem 1.4rem var(--card-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cr-service-card:hover { transform: translateY(-.6rem); box-shadow: 0 1rem 2.6rem rgba(76,29,118,.18); }
.cr-service-card img { width: 100%; object-fit: cover; }
.cr-service-body { padding: 2.4rem; display: flex; flex-direction: column; flex: 1; }
.cr-service-body h3 { font-size: 2.1rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 1rem; }
.cr-service-body p  { font-size: 1.55rem; line-height: 1.75; color: var(--text-muted); flex: 1; }
.cr-service-price {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  margin: 1.6rem 0 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}
.cr-service-price strong { font-size: 2.4rem; font-weight: 800; color: var(--primary); }
.cr-service-price span   { font-size: 1.4rem; color: var(--text-muted); }
.cr-service-body .site-btn { justify-content: center; }

/* Blog teaser cards */
.cr-blog-card {
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 .3rem 1.4rem var(--card-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cr-blog-card:hover { transform: translateY(-.5rem); box-shadow: 0 1rem 2.4rem rgba(76,29,118,.18); }
.cr-blog-card img { width: 100%; height: 19rem; object-fit: cover; }
.cr-blog-body { padding: 2.2rem; }
.cr-blog-body h4 { font-size: 1.85rem; font-weight: 700; color: var(--dark); line-height: 1.45; margin-bottom: 1rem; }
.cr-blog-body p  { font-size: 1.5rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 1.4rem; }
.cr-blog-more    { font-size: 1.45rem; font-weight: 700; color: var(--primary); }
.cr-blog-more i  { margin-left: .5rem; transition: transform .2s ease; }
.cr-blog-card:hover .cr-blog-more i { transform: translateX(.4rem); }

@media (max-width: 575px) {
  .cr-query-list li { font-size: 1.6rem; padding-left: 4rem; }
}

/* ---------- Home hero & CTA band ---------- */
.cr-hero {
  background: linear-gradient(150deg, var(--primary-darker) 0%, var(--primary) 60%, var(--primary-dark) 100%);
  padding: 7rem 0;
  color: #fff;
  overflow: hidden;
}
.cr-hero-kicker {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .25rem;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 1.8rem;
}
.cr-hero-title {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 2.2rem;
}
.cr-hero-title span { color: var(--secondary); }
.cr-hero-text {
  font-size: 1.85rem;
  line-height: 1.85;
  color: rgba(255,255,255,.85);
  max-width: 54rem;
  margin-bottom: 3rem;
}
.cr-hero-cta { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.cr-hero .site-btn.btn-outline { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.cr-hero .site-btn.btn-outline:hover { background: #fff; color: var(--primary); border-color: #fff; }
.cr-hero-img {
  width: 100%;
  border-radius: 1.4rem;
  box-shadow: 0 2rem 5rem rgba(0,0,0,.35);
}

.cr-cta-band {
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-darker) 100%);
  padding: 5.5rem 0;
  color: #fff;
}
.cr-cta-band h2 { font-size: 3.2rem; font-weight: 800; color: #fff; margin-bottom: 1rem; }
.cr-cta-band p  { font-size: 1.8rem; color: rgba(255,255,255,.85); margin: 0; }

@media (max-width: 991px) {
  .cr-hero { padding: 5rem 0; text-align: center; }
  .cr-hero-title { font-size: 3.8rem; }
  .cr-hero-text { margin-left: auto; margin-right: auto; }
  .cr-hero-cta { justify-content: center; }
  .cr-cta-band { text-align: center; }
}
@media (max-width: 575px) {
  .cr-hero-title { font-size: 3rem; }
  .cr-hero-text  { font-size: 1.65rem; }
  .cr-hero-cta .site-btn { width: 100%; justify-content: center; }
  .cr-cta-band h2 { font-size: 2.5rem; }
}