/* Shepherd.js theming — stone/amber palette, dark + parchment light modes */

/* ─── Base popover shell ─────────────────────────────────────────── */
.shepherd-element {
  max-width: 360px;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

html.dark .shepherd-element {
  background: #292524; /* stone-800 */
  border: 1px solid rgba(87, 83, 78, 0.6); /* stone-600/60 */
  color: #e7e5e4; /* stone-200 */
}

html:not(.dark) .shepherd-element {
  background: #fafaf9; /* stone-50 */
  border: 1px solid #d6d3d1; /* stone-300 */
  color: #1c1917; /* stone-900 */
}

/* ─── Arrow ──────────────────────────────────────────────────────── */
html.dark .shepherd-arrow::before {
  background: #292524;
  border-color: rgba(87, 83, 78, 0.6);
}

html:not(.dark) .shepherd-arrow::before {
  background: #fafaf9;
  border-color: #d6d3d1;
}

/* Override Shepherd's specificity-heavy rule that paints the arrow #e6e6e6
   when the popup is below its target on a step that has a title. */
html.dark .shepherd-element.shepherd-has-title[data-popper-placement^="bottom"] > .shepherd-arrow::before {
  background-color: #292524;
}

html:not(.dark) .shepherd-element.shepherd-has-title[data-popper-placement^="bottom"] > .shepherd-arrow::before {
  background-color: #fafaf9;
}

/* ─── Header ─────────────────────────────────────────────────────── */
.shepherd-header {
  padding: 1rem 1rem 0.5rem;
  border-bottom: none;
}

/* Shepherd's own selector is `.shepherd-has-title .shepherd-content .shepherd-header`
   (specificity 0,0,3,0) which sets bg #e6e6e6. Match that depth to override. */
html.dark .shepherd-has-title .shepherd-content .shepherd-header {
  background: #292524;
}

html:not(.dark) .shepherd-has-title .shepherd-content .shepherd-header {
  background: #fafaf9;
}

.shepherd-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.025em;
}

html.dark .shepherd-title {
  color: #fde68a; /* amber-200 — high contrast on stone-800 */
}

html:not(.dark) .shepherd-title {
  color: #78350f; /* amber-900 — strong on parchment */
}

/* ─── Cancel (×) icon ────────────────────────────────────────────── */
.shepherd-cancel-icon {
  font-size: 1.25rem;
  line-height: 1;
  transition: color 0.15s;
}

html.dark .shepherd-cancel-icon {
  color: #78716c; /* stone-500 */
}

html.dark .shepherd-cancel-icon:hover {
  color: #fbbf24;
}

html:not(.dark) .shepherd-cancel-icon {
  color: #a8a29e; /* stone-400 */
}

html:not(.dark) .shepherd-cancel-icon:hover {
  color: #b45309;
}

/* ─── Body text ──────────────────────────────────────────────────── */
.shepherd-text {
  padding: 0.25rem 1rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

html.dark .shepherd-text {
  color: #d6d3d1; /* stone-300 */
}

html:not(.dark) .shepherd-text {
  color: #44403c; /* stone-700 */
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.shepherd-footer {
  padding: 0.5rem 1rem 1rem;
  border-top: none;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

html.dark .shepherd-footer {
  background: #292524;
}

html:not(.dark) .shepherd-footer {
  background: #fafaf9;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.shepherd-button {
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  line-height: 1.4;
}

/* Primary (Next / Finish) */
html.dark .shepherd-button:not(.shepherd-button-secondary) {
  background: #92400e; /* amber-900 */
  color: #fcd34d; /* amber-300 */
}

html.dark .shepherd-button:not(.shepherd-button-secondary):hover {
  background: #78350f; /* amber-900 darker */
  color: #fde68a; /* amber-200 */
}

html:not(.dark) .shepherd-button:not(.shepherd-button-secondary) {
  background: #d97706; /* amber-600 */
  color: #1c1917;
}

html:not(.dark) .shepherd-button:not(.shepherd-button-secondary):hover {
  background: #b45309;
  color: #fff;
}

/* Secondary (Back) */
html.dark .shepherd-button-secondary {
  background: rgba(68, 64, 60, 0.5); /* stone-700/50 */
  color: #a8a29e; /* stone-400 */
}

html.dark .shepherd-button-secondary:hover {
  background: rgba(87, 83, 78, 0.6);
  color: #e7e5e4;
}

html:not(.dark) .shepherd-button-secondary {
  background: #e7e5e4;
  color: #44403c;
}

html:not(.dark) .shepherd-button-secondary:hover {
  background: #d6d3d1;
  color: #1c1917;
}

/* ─── Modal overlay ──────────────────────────────────────────────── */
.shepherd-modal-overlay-container {
  /* opacity set by Shepherd; just ensure the fill matches our dark bg */
  fill: rgba(0, 0, 0, 0.5);
}