/* ─────────────────────────────────────────────────────────────────────────────
   PROPHETIC DISCOVERY - PAGES CSS
   Catch-all page styles: booking, payment, starter-pack, contact extras
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── DETAILS / FAQ ACCORDION ────────────────────────────────────────────── */
details > summary::-webkit-details-marker { display: none; }
details > summary { user-select: none; }

details[open] summary span:last-child {
  transform: rotate(45deg);
  display: inline-block;
}

details {
  transition: all 0.3s var(--ease-smooth);
}

details[open] {
  background: var(--bgAlt);
}

/* ─── STEP CONNECTOR LINE (how-it-works mobile) ───────────────────────────── */
@media (max-width: 768px) {
  .step-connector {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0;
  }

  .step-connector::before {
    content: '';
    display: block;
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, var(--accent), var(--border));
    opacity: 0.4;
  }
}

/* ─── SCROLL SNAP POLISH ──────────────────────────────────────────────────── */
.date-row::-webkit-scrollbar       { height: 4px; }
.date-row::-webkit-scrollbar-track { background: var(--bgAlt); border-radius: 2px; }
.date-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.journey-strip::-webkit-scrollbar       { height: 4px; }
.journey-strip::-webkit-scrollbar-track { background: var(--bgAlt); border-radius: 2px; }
.journey-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ─── BOOKING LOADING STATE ───────────────────────────────────────────────── */
#slot-area {
  transition: opacity 0.3s ease;
}

#slot-area.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ─── PAYMENT INLINE HIGHLIGHT ────────────────────────────────────────────── */
.payment-ref-highlight {
  display: inline-block;
  background: var(--goldLight);
  border: 1px solid rgba(181,137,58,0.25);
  border-radius: var(--radius);
  padding: 2px 8px;
  font-family: 'Courier New', monospace;
  font-size: var(--text-sm);
  color: var(--ink);
}

.payment-summary-card {
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--goldLight);
  border: 1px solid rgba(181,137,58,0.2);
  border-radius: var(--radius-lg);
}

.payment-summary-main {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

.payment-summary-sub,
.payment-hold {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--inkMid);
  line-height: 1.6;
  margin: var(--space-2) 0 0;
}

.payment-hold { color: var(--ink); font-weight: 600; }
.payment-hold:empty,
#booking-summary-local:empty { display: none; }

#payment-alert { margin-bottom: var(--space-5); }

.payment-summary-card[hidden],
.payment-gateway-card[hidden],
#payment-options[hidden],
#payment-done[hidden],
#payment-expired[hidden] {
  display: none;
}


.payment-gateway-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.payment-gateway-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 104px;
  padding: var(--space-5);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.22s var(--ease-smooth), border-color 0.22s ease, box-shadow 0.22s ease;
}

.payment-gateway-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(44,95,74,0.12);
}

.payment-gateway-card span {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
}

.payment-gateway-card small {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--inkLight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.payment-gateway-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.payment-gateway-primary small {
  color: rgba(255,255,255,0.72);
}

.payment-gateway-card.disabled {
  cursor: not-allowed;
  opacity: 0.58;
  pointer-events: none;
}

.payment-provider-note {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--inkLight);
  line-height: 1.6;
  margin: 0;
}

.starter-access-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  background: var(--surface);
  border: 1px solid rgba(44,95,74,0.16);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.starter-access-shortcut[hidden] {
  display: none;
}

.starter-access-shortcut p {
  margin: var(--space-1) 0 0;
  font-family: var(--font-body);
  color: var(--inkMid);
  font-size: var(--text-sm);
}

.starter-access-panel {
  min-height: calc(100vh - 120px);
  padding: calc(72px + var(--space-10)) var(--space-5) var(--space-10);
  background: var(--bg);
  display: grid;
  place-items: center;
}

.starter-access-panel[hidden] {
  display: none;
}

.starter-access-card {
  width: min(680px, 100%);
  padding: clamp(28px, 5vw, 54px);
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(44,95,74,0.15);
  border-radius: var(--radius-lg);
  box-shadow: none;
  backdrop-filter: none;
}

.starter-access-card h1 {
  margin: var(--space-3) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 7vw, 4.5rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 0.95;
}

.starter-access-card > p {
  max-width: 500px;
  margin-bottom: var(--space-6);
  font-family: var(--font-body);
  color: var(--inkMid);
  line-height: 1.75;
}

.starter-access-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}

.starter-access-status {
  min-height: 1.4em;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--inkLight);
}

.starter-access-status.is-success {
  color: var(--success);
}

.starter-access-status.is-error {
  color: var(--error);
}

.starter-access-secondary {
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--inkLight);
  text-decoration: none;
}

.starter-access-secondary:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .payment-gateway-grid { grid-template-columns: 1fr; }
  .starter-access-shortcut {
    align-items: stretch;
    flex-direction: column;
  }
  .starter-access-row {
    grid-template-columns: 1fr;
  }
}

/* ─── STARTER PACK WELCOME BANNER ─────────────────────────────────────────── */
.starter-welcome-banner {
  background: var(--accentSoft);
  border: 1px solid rgba(44,95,74,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  margin-bottom: var(--space-7);
}

/* ─── NAV SAFEGUARD - ensure mobile nav never shows on hidden page ─────────── */
.starter-note {
  font-size: var(--text-xs);
  color: var(--inkLight);
  font-family: var(--font-body);
  font-style: italic;
  text-align: center;
  margin-top: var(--space-4);
}

/* ─── BOOKING SUCCESS ANIMATION ───────────────────────────────────────────── */
@keyframes checkPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.check-icon {
  animation: checkPop 0.5s var(--ease-bounce) forwards;
}

/* ─── CONTACT FAQ HOVER ────────────────────────────────────────────────────── */
details summary:hover {
  background: var(--bgAlt);
}

/* ─── PRINT STYLES (payment page) ────────────────────────────────────────── */
@media print {
  #main-nav,
  footer,
  .btn,
  body { background: white !important; }
  .payment-card { border: 1px solid #ccc !important; }
}

/* ─── FOCUS VISIBLE (accessibility) ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ─── SMOOTH DETAILS REVEAL ───────────────────────────────────────────────── */
details > div {
  animation: fadeSlide 0.25s var(--ease-smooth);
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}