/* ==========================================================================
   Suba Hora Page Styles - Mobile-First
   ========================================================================== */

/* Base Wrapper */
.suba-hora-wrapper {
  min-height: 100vh;
}

/* Consistent vertical spacing between major page sections */
.sh-section-gap {
  margin-top: 14px;
}
.sh-section-gap:first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  .sh-section-gap {
    margin-top: 20px;
  }
}

.suba-hora-page {
  max-width: 720px;
  margin: 0 auto;
}

/* ==========================================================================
   Hero Header Section (mobile-first clean hierarchy)
   ========================================================================== */
.suba-hora-hero-header {
  padding: 0 0 12px;
  margin-bottom: 8px;
}

/* ==========================================================================
   Breadcrumb (micro style - match reports)
   ========================================================================== */
.breadcrumb-nav.micro {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 0.5rem;
}

.breadcrumb-nav.micro.sh-breadcrumb {
  margin-bottom: 8px;
}

.breadcrumb-nav.micro a {
  color: #7b2cbf;
  text-decoration: none;
}
.breadcrumb-nav.micro a:hover {
  text-decoration: underline;
}
.breadcrumb-nav.micro .sep {
  margin: 0 0.35rem;
  color: #bbb;
}

/* ==========================================================================
   Header (report-style)
   ========================================================================== */
.sh-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0 0 8px;
}

.sh-head-top {
  text-align: center;
}

.sh-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #7b2cbf;
  text-align: center;
  margin: 4px 0 8px;
}

.sh-title::after {
  content: '';
  display: block;
  height: 3px;
  width: 52px;
  background: linear-gradient(90deg, #ffd54a, #ffd54a 60%, rgba(123,44,191,0));
  border-radius: 2px;
  margin: 6px auto 0;
}

.sh-subtitle {
  font-size: 0.85rem;
  color: #666;
  margin: 0 0 10px;
  text-align: center;
}

/* Location (centered on mobile) */
.sh-head-meta {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 4px;
}

.sh-location {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(123,44,191,0.06), rgba(123,44,191,0.02));
  border: 1px solid rgba(123,44,191,0.12);
  border-radius: 12px;
  font-size: 0.68rem;
  color: #5a2d82;
}

.loc-emoji {
  font-size: 0.9rem;
}

.loc-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 0.68rem;
  color: #5a2d82;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Use muhurtham-loc-action class from home.css for consistency */
.sh-location .muhurtham-loc-action {
  color: #7b2cbf;
  font-size: 0.62rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.sh-location .muhurtham-loc-action:hover {
  color: #5a2d82;
  text-decoration-style: solid;
}

/* ==========================================================================
   A) Current Hora Hero Card
   ========================================================================== */
.current-hora-card {
  background: linear-gradient(135deg, #fff 0%, #f3e8ff 100%);
  border-radius: 16px;
  padding: 14px 16px;
  border-left: 4px solid var(--purple-600, #9333ea);
}

/* ── Tier-1 card token: matches hero card visual rhythm ─────────── */
.sh-tier1-card {
  border-radius: 16px;
  border-left: 4px solid var(--purple-600, #9333ea);
  background: linear-gradient(135deg, #fff 0%, #f3e8ff 100%);
  padding: 14px 16px;
}
@media (min-width: 480px) {
  .sh-tier1-card {
    padding: 20px 24px;
  }
}

@media (min-width: 480px) {
  .current-hora-card {
    padding: 20px 24px;
  }
}

.current-hora-card .banner-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(107, 33, 168, 0.12);
}

.title-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.title-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hora-emoji {
  font-size: 1.1rem;
}

.banner-top-title {
  font-weight: 600;
  color: var(--purple-700, #6b21a8);
  font-size: 0.9rem;
}

/* ==========================================================================
   Unified Hero Pill Styles (POLISH 1)
   ========================================================================== */
.sh-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Date display wrapper */
.sh-date-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Date chip */
.sh-date-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  background: rgba(123, 44, 191, 0.08);
  color: #4b2166;
  padding: 0 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(123, 44, 191, 0.15);
  font-weight: 600;
  font-size: 0.72rem;
}

.hora-day-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  background: var(--purple-600, #9333ea);
  color: #fff;
  padding: 0 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Sunrise Day Context - shown when hora spans two calendar dates (after midnight, before sunrise) */
.sh-sunrise-context {
  text-align: center;
  margin: -4px 0 8px;
}

.sh-sunrise-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: #92400e;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(245, 158, 11, 0.12) 100%);
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Date chip with date range (cross-date scenario) */
.sh-date-chip.date-range {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
}

/* Planet Display */
.current-hora-body {
  text-align: center;
  padding: 6px 0 2px;
}

.hora-planet-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 10px;
}

.hora-planet-icon {
  font-size: 1.6rem;
}

.hora-planet-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--purple-800, #581c87);
}

/* Time Display - sync time range and type badge */
.hora-time-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.hora-time-range {
  font-size: 0.92rem;
  font-weight: 700;
  color: #581c87;
  font-family: 'Courier New', monospace;
  background: rgba(123, 44, 191, 0.1);
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(123, 44, 191, 0.2);
}

.hora-type-badge {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-800, #92400e);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.hora-type-badge.night {
  background: var(--indigo-100, #e0e7ff);
  color: var(--indigo-800, #3730a3);
  border-color: rgba(99, 102, 241, 0.2);
}

/* Guidance Text */
.hora-guidance {
  font-size: 0.85rem;
  color: var(--gray-600, #555);
  margin: 8px 0 6px;
  line-height: 1.4;
  padding: 0 4px;
}

/* Night mode guidance in hero card - calm, preparation tone */
.hora-guidance.night-guidance {
  color: #5b21b6;
  font-style: italic;
}

.hora-location-note {
  margin: 0.5rem 0 0 0;
  font-size: 0.75rem;
  color: var(--gray-500, #888);
}

/* Next Hora Preview */
.next-hora-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed rgba(107, 33, 168, 0.12);
  font-size: 0.75rem;
}

.next-label {
  color: #555;
  font-size: 0.72rem;
  font-weight: 500;
}

.next-planet {
  font-weight: 700;
  color: #6b21a8;
  font-size: 0.78rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(123, 44, 191, 0.08) 100%);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(123, 44, 191, 0.1);
}

.next-time {
  color: #374151;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ==========================================================================
   B) Timeline Section
   ========================================================================== */
.hora-timeline-section {
  /* spacing handled by .sh-section-gap */
}

.section-title {
  font-size: 1rem;
  color: var(--purple-700, #6b21a8);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

/* Timeline Scroll Container */
.hora-timeline-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--purple-300, #c4b5fd) transparent;
  padding-bottom: 0.5rem;
}

.hora-timeline-scroll::-webkit-scrollbar {
  height: 6px;
}

.hora-timeline-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.hora-timeline-scroll::-webkit-scrollbar-thumb {
  background: var(--purple-300, #c4b5fd);
  border-radius: 3px;
}

/* Timeline Container */
.hora-timeline {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  min-width: max-content;
}

/* Individual Hora Block */
.hora-block {
  flex: 0 0 auto;
  width: 70px;
  background: #fff;
  border-radius: 10px;
  padding: 0.5rem 0.25rem;
  text-align: center;
  border: 1px solid var(--gray-200, #e5e7eb);
  transition: all 0.2s;
  cursor: default;
}

.hora-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(107, 33, 168, 0.15);
}

.hora-block.day {
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
  border-color: var(--amber-200, #fde68a);
}

.hora-block.night {
  background: linear-gradient(180deg, #eef2ff 0%, #fff 100%);
  border-color: var(--indigo-200, #c7d2fe);
}

.hora-block.current {
  border: 2px solid var(--purple-500, #a855f7);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
  transform: scale(1.05);
}

.hora-block.current:hover {
  transform: scale(1.05);
}

.hora-block-num {
  font-size: 0.65rem;
  color: var(--gray-400, #999);
  margin-bottom: 0.25rem;
}

.hora-block-planet {
  font-size: 1.25rem;
  margin-bottom: 0.15rem;
}

.hora-block-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-700, #444);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hora-block-time {
  font-size: 0.6rem;
  color: var(--gray-500, #888);
  font-family: 'Courier New', monospace;
}

/* Timeline Legend */
.hora-timeline-legend {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--gray-600, #666);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend-current .legend-dot {
  background: var(--purple-500, #a855f7);
  border: 1px solid var(--purple-700, #7c3aed);
}

.legend-day .legend-dot {
  background: var(--amber-200, #fde68a);
  border: 1px solid var(--amber-400, #fbbf24);
}

.legend-night .legend-dot {
  background: var(--indigo-200, #c7d2fe);
  border: 1px solid var(--indigo-400, #818cf8);
}

.hora-loading-placeholder {
  padding: 2rem;
  text-align: center;
  color: var(--gray-500, #888);
  width: 100%;
}

/* ==========================================================================
   C) Guidance Section
   ========================================================================== */
.hora-guidance-section {
  background: #fff;
  border-radius: 12px;
  padding: 0.6rem 0.7rem !important;
}

.hora-guidance-section .section-title {
  margin-bottom: 0.25rem !important;
  text-align: center;
  font-size: 1rem !important;
}

.guidance-block {
  margin-bottom: 0.4rem !important;
}

.guidance-block:last-of-type {
  margin-bottom: 0 !important;
}

.guidance-label {
  font-size: 0.85rem !important;
  font-weight: 600;
  margin-bottom: 0.15rem !important;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.guidance-icon {
  font-size: 0.85rem;
}

.guidance-supports .guidance-label {
  color: var(--green-700, #15803d);
}

.guidance-avoid .guidance-label {
  color: var(--amber-700, #b45309);
}

.guidance-list {
  margin: 0 !important;
  padding-left: 1.1rem !important;
  font-size: 0.8rem !important;
  color: var(--gray-700, #444);
}

.guidance-list li {
  margin-bottom: 0.1rem !important;
  line-height: 1.35 !important;
}

/* Prefix label for night mode supports list */
.guidance-list li.list-prefix-label {
  list-style: none;
  margin-left: -1.1rem;
  margin-bottom: 0.2rem !important;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b21a8;
  font-style: italic;
}

.guidance-mindset {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem !important;
  background: rgba(107, 33, 168, 0.05);
  border-radius: 8px;
  margin-bottom: 0.35rem !important;
  order: 1;
}

/* Night-promoted mindset - more prominent styling */
.guidance-mindset.night-promoted {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  padding: 0.5rem 0.6rem !important;
  order: 0; /* Move to top */
}

.mindset-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.mindset-text {
  font-size: 0.8rem !important;
  color: var(--gray-700, #444);
  line-height: 1.4 !important;
  font-style: italic;
}

/* ==========================================================================
   D) Full Table Section
   ========================================================================== */
.hora-table-section {
  /* spacing handled by .sh-section-gap */
}

.hora-table-details {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.hora-table-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--purple-700, #6b21a8);
  cursor: pointer;
  user-select: none;
}

.hora-table-summary::-webkit-details-marker {
  display: none;
}

.summary-icon {
  font-size: 1.1rem;
}

.summary-arrow {
  margin-left: auto;
  font-size: 1.2rem;
  color: #7b2cbf;
  font-weight: bold;
  transition: transform 0.2s;
}

.hora-table-details[open] .summary-arrow,
.hora-info-details[open] .summary-arrow {
  transform: rotate(180deg);
}

.hora-table-content {
  padding: 1rem 1rem 1.25rem;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* ── Date Picker Row ────────────────────────────────────────────── */
.sh-date-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, rgba(123, 44, 191, 0.06), rgba(168, 85, 247, 0.04));
  border: 1px solid rgba(123, 44, 191, 0.15);
  border-radius: 10px;
}

.sh-date-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--purple-700, #6b21a8);
  white-space: nowrap;
}

.sh-date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sh-date-input {
  padding: 0.3rem 0.5rem;
  border: 1.5px solid rgba(123, 44, 191, 0.3);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #581c87;
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 130px;
  text-align: center;
}

.sh-date-input:focus {
  border-color: #7b2cbf;
  box-shadow: 0 0 0 2px rgba(123, 44, 191, 0.15);
}

/* Disabled / non-premium state */
.sh-date-input.sh-date-locked {
  cursor: pointer;
  opacity: 0.65;
  background: #f9f5ff;
  pointer-events: auto; /* still clickable for redirect */
}

.sh-date-premium-badge {
  font-size: 0.85rem;
  cursor: pointer;
}

/* Loading overlay on table content when fetching new date */
.hora-table-content.sh-date-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
}
.hora-table-content.sh-date-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 12px;
}

/* Sun Times Row - Vertical layout */
.sun-times-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.sun-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sun-item strong {
  font-family: 'Courier New', monospace;
  color: #581c87;
}

/* Sub Tables */
.hora-subtable {
  margin-bottom: 1rem;
}

.hora-subtable:last-child {
  margin-bottom: 0;
}

.subtable-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700, #444);
  margin-bottom: 0.5rem;
}

.hora-table-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.hora-table-cell {
  background: var(--gray-50, #f9fafb);
  border-radius: 6px;
  padding: 0.4rem 0.25rem;
  text-align: center;
  font-size: 0.7rem;
  border: 1px solid var(--gray-200, #e5e7eb);
  box-sizing: border-box;
  min-width: 0;
}

.hora-table-cell.current {
  background: var(--purple-100, #f3e8ff);
  border-color: var(--purple-400, #c084fc);
}

.cell-num {
  font-weight: 600;
  color: var(--gray-500, #888);
  font-size: 0.6rem;
}

.cell-planet {
  font-size: 0.95rem;
}

.cell-name {
  font-weight: 500;
  color: var(--gray-700, #444);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-time {
  font-size: 0.6rem;
  color: var(--gray-500, #888);
  font-family: 'Courier New', monospace;
}

/* ==========================================================================
   Info Section
   ========================================================================== */
.hora-info-section {
  /* spacing handled by .sh-section-gap */
}

.hora-info-details {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.hora-info-details summary {
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--purple-700, #6b21a8);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}

.hora-info-details summary::-webkit-details-marker {
  display: none;
}

.hora-info-content {
  padding: 0 1rem 1rem;
  font-size: 0.85rem;
  color: var(--gray-600, #666);
  line-height: 1.6;
}

/* Disclaimer (left-aligned) */
.ai-disclaimer.sh-disclaimer {
  text-align: left;
  font-size: 0.75rem;
  color: #666;
  padding: 0.75rem;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
  margin-top: 1rem;
}

/* ==========================================================================
   Bottom CTAs (match report pages)
   ========================================================================== */
.sh-bottom-ctas {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  max-width: 720px;
}

.sh-bottom-ctas .btn-back {
  flex: 1 1 0;
  min-width: 0;
  max-width: 240px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #e0c7ff;
  background: #faf5ff;
  color: #4b2166;
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.sh-bottom-ctas .btn-back:hover {
  background: #f3e8ff;
  box-shadow: 0 2px 8px rgba(123,44,191,0.16);
  transform: translateY(-1px);
}

/* Mobile: stack buttons vertically */
@media (max-width: 520px) {
  .sh-bottom-ctas {
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch;
  }
  .sh-bottom-ctas .btn-back {
    width: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (min-width: 480px) {
  .suba-hora-title {
    font-size: 1.75rem;
  }

  .hora-planet-name {
    font-size: 1.75rem;
  }

  .hora-block {
    width: 80px;
    padding: 0.6rem 0.3rem;
  }

  .hora-table-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 640px) {
  .suba-hora-page {
    padding: 1.5rem;
  }

  .current-hora-card {
    padding: 1.5rem;
  }

  .hora-table-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Planet-specific Colors (optional enhancement) */
.planet-sun { color: #f59e0b; }
.planet-moon { color: #6b7280; }
.planet-mars { color: #ef4444; }
.planet-mercury { color: #10b981; }
.planet-jupiter { color: #eab308; }
.planet-venus { color: #ec4899; }
.planet-saturn { color: #3b82f6; }

/* ==========================================================================
   E) Night Hora Framing Styles
   ========================================================================== */

/* Night context note - hidden by default, shown during night hours */
.night-context-note {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-radius: 10px;
  margin-bottom: 1rem;
  color: #e0e7ff;
  font-size: 0.85rem;
  line-height: 1.5;
  border: 1px solid rgba(129, 140, 248, 0.3);
  box-shadow: 0 2px 8px rgba(30, 27, 75, 0.15);
}

.night-context-note.visible {
  display: flex;
}

.night-context-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.night-context-text {
  flex: 1;
}

/* Tomorrow Anchor Block - shows next sunrise info during night */
.tomorrow-anchor {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem !important;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 8px;
  margin-top: 0.35rem !important;
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.1);
}

.tomorrow-anchor.visible {
  display: flex;
}

.tomorrow-anchor-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.tomorrow-anchor-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tomorrow-anchor-label {
  font-size: 0.8rem !important;
  color: #78350f;
  font-weight: 600;
}

.tomorrow-anchor-desc {
  font-size: 0.72rem !important;
  color: #92400e;
  font-weight: 400;
}

.tomorrow-anchor-time {
  font-size: 0.8rem !important;
  font-weight: 600;
  color: #b45309;
  margin-top: 0.05rem;
}

/* Night-specific guidance section styling */
.hora-guidance-section.night-hora-active {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border-color: rgba(139, 92, 246, 0.25);
}

/* ── Night Calm Reflection Panel ── */
.night-calm-panel {
  padding: 0.75rem 0.85rem;
  background: rgba(139, 92, 246, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  margin-top: 0.35rem;
}

.night-calm-body {
  font-size: 0.82rem;
  color: #5b21b6;
  line-height: 1.55;
  margin: 0 0 0.45rem 0;
  font-style: italic;
}

.night-calm-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.night-calm-suggestions li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: #6b21a8;
  background: rgba(139, 92, 246, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: 16px;
  font-weight: 500;
}

.night-calm-suggestions li::before {
  content: '🌿';
  font-size: 0.72rem;
}

/* Guidance header */
.guidance-header {
  margin-bottom: 0.25rem !important;
}

.hora-guidance-section .section-title {
  margin-bottom: 0.1rem !important;
}

.hora-guidance-section .section-subtitle {
  display: none;
  font-size: 0.78rem !important;
  color: var(--gray-600, #666);
  margin: 0 !important;
  line-height: 1.3 !important;
  font-style: italic;
}

.hora-guidance-section.night-hora-active .section-subtitle {
  display: block;
  color: #6b21a8;
}

.hora-guidance-section.night-hora-active .section-title {
  color: #5b21b6;
}

/* Night supports - softer green for preparation context */
.hora-guidance-section.night-hora-active .guidance-supports .guidance-label {
  color: #047857;
}

/* Night avoid - softer amber for postponement context */
.hora-guidance-section.night-hora-active .guidance-avoid .guidance-label {
  color: #b45309;
}

/* Make mindset more prominent during night */
.hora-guidance-section.night-hora-active .guidance-mindset {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Mobile adjustments for night elements */
@media (max-width: 520px) {
  .night-context-note {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }
  
  .tomorrow-anchor {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }
  
  .tomorrow-anchor-content {
    align-items: center;
  }

  .night-calm-panel {
    padding: 0.6rem 0.7rem;
  }

  .night-calm-suggestions {
    flex-direction: column;
    gap: 0.3rem;
  }
}

/* Mobile adjustments for hero card header */
@media (max-width: 400px) {
  .current-hora-card {
    padding: 12px 14px;
  }
  
  .current-hora-card .banner-title {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  
  .current-hora-card .title-right {
    justify-content: flex-end;
    gap: 0.3rem;
  }
  
  .title-left {
    flex-shrink: 1;
    min-width: 0;
  }
  
  .hora-emoji {
    font-size: 0.95rem;
  }
  
  .banner-top-title {
    font-size: 0.82rem;
  }
  
  .sh-date-chip {
    font-size: 0.65rem;
    padding: 0.12rem 0.4rem;
  }
  
  .hora-day-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
  }
  
  /* Planet section - compact */
  .hora-planet-icon {
    font-size: 1.3rem;
  }
  
  .hora-planet-name {
    font-size: 1.1rem;
  }
  
  .hora-planet-display {
    margin-bottom: 8px;
  }
  
  /* Time display - compact */
  .hora-time-range {
    font-size: 0.82rem;
    padding: 5px 10px;
  }
  
  .hora-type-badge {
    font-size: 0.65rem;
    padding: 5px 8px;
  }
  
  /* Guidance - compact */
  .hora-guidance {
    font-size: 0.8rem;
    margin: 6px 0 4px;
    line-height: 1.35;
  }
  
  /* Next hora - compact */
  .next-hora-preview {
    margin-top: 4px;
    padding-top: 4px;
  }
  
  .sh-sunrise-context {
    text-align: center;
    margin: 2px 0 6px;
  }
  
  .sh-sunrise-pill {
    font-size: 0.62rem;
    padding: 2px 8px;
  }
}

/* ==========================================================================
   F) Night Mode - Calmer, Less "Action CTA" Feel
   ========================================================================== */

/* Night mode container class - applied to .suba-hora-wrapper or .suba-hora-page */
.suba-hora-night-mode {
  /* Slightly cooler, calmer background */
  background: linear-gradient(180deg, #f8f7ff 0%, #f5f3ff 100%);
}

/* Night badge in hero card */
.suba-hora-night-mode .hora-day-badge {
  background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
  color: #e0e7ff;
  border: 1px solid rgba(99, 102, 241, 0.3);
  font-weight: 600;
}

/* Hero card - softer in night mode */
.suba-hora-night-mode .current-hora-card {
  background: linear-gradient(145deg, #fefefe 0%, #faf8ff 100%);
  border-color: rgba(139, 92, 246, 0.15);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);
}

.suba-hora-night-mode .current-hora-card .banner-title {
  border-bottom-color: rgba(139, 92, 246, 0.1);
}

/* Planet display - slightly muted */
.suba-hora-night-mode .hora-planet-name {
  color: #4c1d95;
}

.suba-hora-night-mode .hora-planet-emoji {
  opacity: 0.9;
}

/* Time display - softer */
.suba-hora-night-mode .hora-time-now {
  color: #5b21b6;
}

/* Guidance section - lighter, more breathing room */
.suba-hora-night-mode .hora-guidance-section {
  background: linear-gradient(145deg, #fefefe 0%, #faf8ff 100%);
  border-color: rgba(139, 92, 246, 0.12);
  padding: 1.25rem;
}

/* Mindset - gentle left border emphasis */
.suba-hora-night-mode .guidance-mindset {
  background: rgba(139, 92, 246, 0.06);
  border-left: 3px solid rgba(139, 92, 246, 0.4);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1rem 1rem 1.25rem;
}

.suba-hora-night-mode .guidance-mindset.night-promoted {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.04) 100%);
  border-left: 4px solid #8b5cf6;
  border-top: none;
  border-right: none;
  border-bottom: none;
}

/* Supports/Avoid blocks - more whitespace, softer colors */
.suba-hora-night-mode .guidance-block {
  margin-bottom: 1.25rem;
  padding: 0.5rem 0;
}

/* Softer warning color for avoid section at night */
.suba-hora-night-mode .guidance-avoid .guidance-label {
  color: #78716c; /* Warm gray instead of amber warning */
}

.suba-hora-night-mode .guidance-avoid .guidance-icon {
  opacity: 0.7;
}

/* Supports - gentler green */
.suba-hora-night-mode .guidance-supports .guidance-label {
  color: #059669;
}

/* List items - more breathing room */
.suba-hora-night-mode .guidance-list {
  line-height: 1.6;
}

.suba-hora-night-mode .guidance-list li {
  margin-bottom: 0.4rem;
  color: #4b5563;
}

/* Tomorrow anchor - calmer yellow */
.suba-hora-night-mode .tomorrow-anchor {
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  border-color: rgba(234, 179, 8, 0.2);
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.08);
}

/* Table section - lighter */
.suba-hora-night-mode .hora-table-details {
  background: #fefefe;
  border-color: rgba(139, 92, 246, 0.1);
}

.suba-hora-night-mode .hora-table-summary {
  background: linear-gradient(135deg, #faf8ff 0%, #f5f3ff 100%);
}

/* Timeline blocks - softer */
.suba-hora-night-mode .hora-block {
  border-color: rgba(139, 92, 246, 0.08);
}

.suba-hora-night-mode .hora-block.current-hora {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}

/* Section titles - calmer purple */
.suba-hora-night-mode .section-title {
  color: #6b21a8;
}

/* Overall text - slightly softer */
.suba-hora-night-mode {
  color: #374151;
}

/* ==========================================================================
   Mobile Responsive - Hero Header & Grid Fixes
   ========================================================================== */

/* Tablet and below - center location */
@media (max-width: 600px) {
  .sh-head-meta {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   COMPACT MODE - Mobile (≤480px)
   Reduces typography, spacing, and whitespace for a premium mobile feel
   ========================================================================== */
@media (max-width: 480px) {
  /* --- A) Hero Header - Compact --- */
  .suba-hora-hero-header {
    padding: 0 0 6px;
  }
  
  .breadcrumb-nav.micro.sh-breadcrumb {
    font-size: 0.68rem;
    opacity: 0.65;
    margin-bottom: 4px;
  }
  
  .sh-title {
    font-size: 0.95rem;
    margin: 2px 0 4px;
  }
  
  .sh-title::after {
    height: 2px;
    width: 40px;
    margin: 4px auto 0;
  }
  
  .sh-subtitle {
    font-size: 0.75rem;
    margin-bottom: 6px;
  }
  
  /* --- B) Location Pill - Small + Right Aligned --- */
  .sh-head-meta {
    justify-content: flex-end;
    margin-bottom: 2px;
  }
  
  .sh-location {
    font-size: 0.62rem;
    padding: 3px 8px;
    gap: 5px;
  }
  
  .loc-emoji {
    font-size: 0.75rem;
  }
  
  .loc-text {
    max-width: 120px;
    font-size: 0.62rem;
  }
  
  .sh-location .muhurtham-loc-action {
    font-size: 0.58rem;
  }
  
  /* --- C) Hero Card - Compact --- */
  .current-hora-card {
    padding: 10px 12px;
    margin-bottom: 1rem;
  }
  
  .current-hora-card .banner-title {
    margin-bottom: 6px;
    padding-bottom: 6px;
    gap: 4px 8px;
  }
  
  .hora-emoji {
    font-size: 0.9rem;
  }
  
  .banner-top-title {
    font-size: 0.8rem;
  }
  
  .sh-date-chip {
    height: 18px;
    font-size: 0.58rem;
    padding: 0 0.35rem;
  }
  
  .hora-day-badge {
    height: 18px;
    font-size: 0.58rem;
    padding: 0 0.35rem;
    border-radius: 5px;
  }
  
  /* POLISH 2: Reduce divider opacity in compact mode */
  .current-hora-card .banner-title {
    border-bottom-color: rgba(107, 33, 168, 0.08);
  }
  
  .next-hora-preview {
    border-top-color: rgba(107, 33, 168, 0.08);
  }
  
  .current-hora-body {
    padding: 4px 0 2px;
  }
  
  .hora-planet-display {
    margin-bottom: 6px;
    gap: 0.3rem;
  }
  
  .hora-planet-icon {
    font-size: 1.2rem;
  }
  
  .hora-planet-name {
    font-size: 1rem;
  }
  
  .hora-time-display {
    gap: 0.4rem;
    margin-bottom: 0.4rem;
  }
  
  .hora-time-range {
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 8px;
  }
  
  .hora-type-badge {
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 8px;
  }
  
  .hora-guidance {
    font-size: 0.75rem;
    margin: 5px 0 3px;
    line-height: 1.3;
  }
  
  .next-hora-preview {
    margin-top: 4px;
    padding-top: 4px;
    gap: 0.3rem;
  }
  
  .next-label {
    font-size: 0.65rem;
  }
  
  .next-planet {
    font-size: 0.72rem;
    padding: 2px 6px;
  }
  
  .next-time {
    font-size: 0.68rem;
  }
  
  .sh-sunrise-context {
    margin: 1px 0 4px;
  }
  
  .sh-sunrise-pill {
    font-size: 0.58rem;
    padding: 2px 6px;
  }
  
  /* --- D) Section Titles - Smaller --- */
  .section-title {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }
  
  /* --- E) Timeline Section - Compact --- */
  .hora-timeline-section {
    margin-bottom: 1rem;
  }
  
  .hora-block {
    padding: 0.35rem 0.5rem;
    min-width: 64px;
  }
  
  .hora-num {
    font-size: 0.55rem;
  }
  
  .hora-planet-emoji {
    font-size: 1rem;
  }
  
  .hora-planet-name-small {
    font-size: 0.6rem;
  }
  
  .hora-start-time {
    font-size: 0.55rem;
  }
  
  /* --- F) Guidance Section - Compact --- */
  .hora-guidance-section {
    padding: 10px 12px;
    margin-bottom: 1rem;
  }
  
  .hora-guidance-section .section-title {
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
  }
  
  .guidance-subtitle {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
  }
  
  .guidance-block {
    margin-bottom: 0.5rem;
  }
  
  .guidance-label {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
  }
  
  .guidance-list {
    font-size: 0.72rem;
    line-height: 1.35;
  }
  
  .guidance-list li {
    margin-bottom: 0.2rem;
  }
  
  .guidance-mindset {
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
    margin-top: 0.4rem;
  }
  
  /* --- G) Accordion / Full Table - Compact --- */
  .hora-table-section {
    margin-bottom: 1rem;
  }
  
  .hora-table-summary {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    gap: 0.35rem;
  }
  
  .summary-icon {
    font-size: 0.9rem;
  }
  
  .summary-arrow {
    font-size: 1rem;
  }
  
  .hora-table-content {
    padding: 0.6rem 0.6rem 0.8rem;
  }
  
  .sun-times-row {
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
  }
  
  .subtable-title {
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
  }
  
  /* Grid: 3 columns on small phones */
  .hora-table-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  
  .hora-table-cell {
    padding: 0.3rem 0.15rem;
    font-size: 0.62rem;
    border-radius: 5px;
  }
  
  .cell-num {
    font-size: 0.52rem;
  }
  
  .cell-planet {
    font-size: 0.85rem;
  }
  
  .cell-name {
    font-size: 0.58rem;
  }
  
  .cell-time {
    font-size: 0.5rem;
  }
  
  /* --- H) Info Section - Compact --- */
  .hora-info-section {
    margin-bottom: 0.75rem;
  }
  
  .info-card {
    padding: 0.5rem 0.6rem;
  }
  
  .info-title {
    font-size: 0.78rem;
  }
  
  .info-text {
    font-size: 0.7rem;
    line-height: 1.35;
  }
  
  /* --- I) Tomorrow Anchor - Compact --- */
  .tomorrow-anchor {
    padding: 0.5rem 0.6rem;
    margin-top: 0.5rem;
  }
  
  .tomorrow-anchor-label {
    font-size: 0.7rem;
  }
  
  .tomorrow-anchor-desc {
    font-size: 0.65rem;
  }
  
  .tomorrow-anchor-time {
    font-size: 0.72rem;
  }
  
  /* --- J) Night Context Note - Compact --- */
  .night-context-note {
    padding: 0.4rem 0.5rem;
    font-size: 0.68rem;
    margin-bottom: 0.5rem;
  }
}

/* Very narrow screens */
@media (max-width: 360px) {
  .breadcrumb-nav.micro.sh-breadcrumb {
    font-size: 0.65rem;
    opacity: 0.6;
  }
  
  .sh-title {
    font-size: 0.88rem;
  }
  
  .sh-subtitle {
    font-size: 0.7rem;
  }
  
  .sh-location {
    font-size: 0.65rem;
  }
  
  .loc-text {
    max-width: 100px;
  }
  
  .current-hora-card {
    padding: 8px 10px;
  }
  
  .hora-planet-icon {
    font-size: 1.1rem;
  }
  
  .hora-planet-name {
    font-size: 0.92rem;
  }
  
  .hora-time-range {
    font-size: 0.72rem;
    padding: 3px 8px;
  }
  
  .hora-type-badge {
    font-size: 0.55rem;
    padding: 3px 6px;
  }
  
  .hora-table-content {
    padding: 0.5rem 0.4rem 0.6rem;
  }
  
  .hora-table-grid {
    gap: 5px;
  }
  
  .hora-table-cell {
    padding: 0.25rem 0.1rem;
  }
}
/* =========================
   Global Toast Notification
   - Centered on page
   - Site purple theme
   ========================= */
.gt-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  min-width: 280px;
  max-width: 90vw;
  padding: 20px 28px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  background: linear-gradient(135deg, #7b2cbf, #5a2d82);
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 32px rgba(123,44,191,0.4), 0 0 0 4px rgba(123,44,191,0.1);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.gt-toast.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.gt-toast.success {
  background: linear-gradient(135deg, #27ae60, #1e8449);
  box-shadow: 0 8px 32px rgba(39,174,96,0.4), 0 0 0 4px rgba(39,174,96,0.1);
}

.gt-toast.error {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  box-shadow: 0 8px 32px rgba(231,76,60,0.4), 0 0 0 4px rgba(231,76,60,0.1);
}

.gt-toast.warn {
  background: linear-gradient(135deg, #f39c12, #d68910);
  box-shadow: 0 8px 32px rgba(243,156,18,0.4), 0 0 0 4px rgba(243,156,18,0.1);
}

.gt-toast.info {
  background: linear-gradient(135deg, #7b2cbf, #5a2d82);
  box-shadow: 0 8px 32px rgba(123,44,191,0.4), 0 0 0 4px rgba(123,44,191,0.1);
}

@media (max-width: 480px) {
  .gt-toast {
    min-width: 240px;
    padding: 16px 20px;
    font-size: 0.92rem;
    border-radius: 14px;
  }
}

/* ==========================================================================
   Phase 2A — Trust Strip, Moment Headline, Lenses, Now vs Next
   Additive styles only; no existing rules removed.
   ========================================================================== */

/* ---------- A-2) Phase 2A Hero inside current-hora-card ---------- */
.sh-phase2-hero {
  text-align: center;
}

/* Trust strip: small, muted, single line */
.sh-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
  color: #78716c;
  line-height: 1.4;
  margin-bottom: 8px;
}

.sh-trust-strip-text {
  white-space: normal;
  word-break: break-word;
}

.sh-trust-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Reuse existing badge palette */
.sh-trust-badge:not(.night) {
  background: #fef3c7;
  color: #92400e;
}
.sh-trust-badge.night {
  background: #e0e7ff;
  color: #3730a3;
}

/* Moment headline: dominant text */
.sh-moment-headline {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--purple-800, #581c87);
  line-height: 1.45;
  margin: 0 0 6px;
  padding: 0 4px;
}

@media (max-width: 480px) {
  .sh-moment-headline {
    font-weight: 500;
  }
}

@media (max-width: 400px) {
  .sh-moment-headline {
    font-size: 1.15rem;
  }
  .sh-trust-strip {
    font-size: 0.72rem;
  }
}

@media (max-width: 360px) {
  .sh-moment-headline {
    font-size: 1.1rem;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }
}

/* ---------- B-2) Action Lens Chips ---------- */
.sh-lenses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 4px;
}

.sh-lens-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 500;
  color: #5b21b6;
  background: rgba(123, 44, 191, 0.08);
  border: 1px solid rgba(123, 44, 191, 0.18);
  border-radius: 16px;
  padding: 3px 11px;
  white-space: nowrap;
  line-height: 1.4;
}

/* ---------- C) Now vs Next Section ---------- */
.sh-now-next {
  background: #fff;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
}

.sh-now-next .section-title {
  font-size: 0.92rem;
  text-align: center;
  margin-bottom: 0.4rem;
  color: var(--purple-700, #6b21a8);
}

.sh-now-next-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sh-now-block,
.sh-next-block {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 8px 12px;
  border-radius: 10px;
  width: 100%;
}

.sh-now-block {
  background: rgba(123, 44, 191, 0.06);
  border: 1px solid rgba(123, 44, 191, 0.14);
}

.sh-next-block {
  background: #fafafa;
  border: 1px solid #e5e7eb;
}

.sh-now-next-arrow {
  font-size: 1rem;
  color: #a78bfa;
  transform: rotate(90deg);
}

.sh-nn-planet {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--purple-800, #581c87);
  margin-bottom: 2px;
}

.sh-nn-time {
  font-size: 0.78rem;
  color: #6b7280;
}

.sh-next-block .sh-nn-planet {
  font-weight: 500;
  color: #4b5563;
}

.sh-next-block .sh-nn-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Side-by-side on larger screens */
@media (min-width: 480px) {
  .sh-now-next-row {
    flex-direction: row;
    align-items: stretch;
  }

  .sh-now-block,
  .sh-next-block {
    width: auto;
  }

  .sh-now-next-arrow {
    transform: none;
    align-self: center;
  }
}

/* ---------- Phase 2A Guidance list refinement ---------- */

/* Supports: calm positive (existing green label kept; list color softer) */
.sh-phase2-hero ~ .hora-guidance-section .guidance-supports .guidance-list,
.sh-lenses ~ .guidance-block.guidance-supports .guidance-list {
  color: var(--gray-700, #444);
}

/* Avoid: neutral, no red/orange on list items (label already amber-700) */
.guidance-avoid .guidance-list {
  color: var(--gray-600, #555);
}


/* ===================================================================
   Plan Ahead – Teaser card & container placeholder
   =================================================================== */

.sh-plan-ahead-section {
  /* spacing handled by .sh-section-gap */
}

/* ── Teaser card ─────────────────────────────────────────────────── */
.sh-plan-ahead-teaser {
  text-align: center;
}

.sh-pa-teaser-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sh-pa-teaser-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.sh-pa-teaser-headline {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gray-800, #333);
  margin: 0;
  line-height: 1.4;
}

.sh-pa-teaser-desc {
  font-size: 0.88rem;
  color: var(--gray-600, #666);
  margin: 0 0 0.25rem;
  line-height: 1.5;
}

.sh-pa-teaser-cta {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.65rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-600, #7c3aed), var(--purple-500, #8b5cf6));
  border: none;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  cursor: pointer;
}
.sh-pa-teaser-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(124, 58, 237, 0.4);
  opacity: 0.95;
  color: #fff;
  text-decoration: none;
}
.sh-pa-teaser-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

/* ── Active subscriber container (empty placeholder) ─────────────── */
.sh-plan-ahead-container {
  min-height: 80px;
  position: relative;
}

/* ── Premium Plan Ahead spinner overlay ──────────────────────────── */
.sh-pa-spinner-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sh-pa-spinner-overlay.sh-pa-spinner--visible {
  opacity: 1;
}
.sh-pa-spinner-backdrop {
  position: absolute;
  width: 100%; height: 100%;
  background: linear-gradient(135deg,
    rgba(253,246,255,0.92) 0%,
    rgba(243,234,255,0.92) 100%);
  backdrop-filter: blur(4px);
}
.sh-pa-spinner-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sh-pa-spinner-msg {
  margin-top: 16px;
  font-size: 0.82rem;
  color: #7b2cbf;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0.85;
  animation: shPulseMsg 2.4s ease-in-out infinite;
}
@keyframes shPulseMsg {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Reuse existing .spiritual-spinner / .mandala-ring / .om-symbol /
   .lotus-petals from the site — scope a smaller variant here. */
.sh-pa-spiritual-spinner {
  width: 100px; height: 100px;
}
.sh-pa-spiritual-spinner .mandala-ring.outer {
  width: 100px; height: 100px;
}
.sh-pa-spiritual-spinner .mandala-ring.middle {
  width: 72px; height: 72px;
}
.sh-pa-spiritual-spinner .mandala-ring.inner {
  width: 44px; height: 44px;
}
.sh-pa-spiritual-spinner .om-symbol {
  font-size: 22px;
}
.sh-pa-spiritual-spinner .lotus-petals {
  width: 100px; height: 100px;
}
.sh-pa-spiritual-spinner .lotus-petals span {
  height: 15px;
  width: 6px;
  margin-left: -3px;
  transform-origin: center 50px;
}

/* Base mandala / lotus rules (self-contained for suba hora page) */
.sh-pa-spinner-overlay .spiritual-spinner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sh-pa-spinner-overlay .mandala-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}
.sh-pa-spinner-overlay .mandala-ring.outer {
  border-top-color: #7b2cbf;
  border-right-color: #9c4dcc;
  animation: shSpinOuter 3s linear infinite;
}
.sh-pa-spinner-overlay .mandala-ring.middle {
  border-top-color: #d4a5ff;
  border-bottom-color: #b388eb;
  animation: shSpinMiddle 2s linear infinite reverse;
}
.sh-pa-spinner-overlay .mandala-ring.inner {
  border-left-color: #e9d5ff;
  border-right-color: #c084fc;
  animation: shSpinInner 1.5s linear infinite;
}
.sh-pa-spinner-overlay .om-symbol {
  position: absolute;
  color: #7b2cbf;
  font-weight: bold;
  animation: shPulseOm 2s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(123,44,191,0.3);
}
.sh-pa-spinner-overlay .lotus-petals {
  position: absolute;
  animation: shRotateLotus 8s linear infinite;
}
.sh-pa-spinner-overlay .lotus-petals span {
  position: absolute;
  top: 0;
  left: 50%;
  background: linear-gradient(to bottom, #7b2cbf, transparent);
  border-radius: 50% 50% 0 0;
  opacity: 0.6;
}
.sh-pa-spinner-overlay .lotus-petals span:nth-child(1) { transform: rotate(0deg); }
.sh-pa-spinner-overlay .lotus-petals span:nth-child(2) { transform: rotate(45deg); }
.sh-pa-spinner-overlay .lotus-petals span:nth-child(3) { transform: rotate(90deg); }
.sh-pa-spinner-overlay .lotus-petals span:nth-child(4) { transform: rotate(135deg); }
.sh-pa-spinner-overlay .lotus-petals span:nth-child(5) { transform: rotate(180deg); }
.sh-pa-spinner-overlay .lotus-petals span:nth-child(6) { transform: rotate(225deg); }
.sh-pa-spinner-overlay .lotus-petals span:nth-child(7) { transform: rotate(270deg); }
.sh-pa-spinner-overlay .lotus-petals span:nth-child(8) { transform: rotate(315deg); }

@keyframes shSpinOuter   { to { transform: rotate(360deg); } }
@keyframes shSpinMiddle  { to { transform: rotate(360deg); } }
@keyframes shSpinInner   { to { transform: rotate(360deg); } }
@keyframes shPulseOm     { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.8; } }
@keyframes shRotateLotus { to { transform: rotate(360deg); } }

/* ── Mobile tweaks ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sh-plan-ahead-teaser {
    /* padding handled by .sh-tier1-card */
  }
  .sh-pa-teaser-headline {
    font-size: 0.98rem;
  }
  .sh-pa-teaser-desc {
    font-size: 0.84rem;
  }
}


/* ===================================================================
   Plan Ahead – Active Subscriber UI
   (intent pills, timeframe pills, window cards)
   =================================================================== */

/* ── Container header ──────────────────────────────────────────────── */
.sh-pa-header {
  text-align: center;
  margin-bottom: 0.6rem;
}
.sh-pa-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--purple-700, #6b21a8);
  margin: 0 0 0.1rem;
  line-height: 1.35;
}
.sh-pa-subtitle {
  font-size: 0.85rem;
  color: var(--gray-600, #666);
  margin: 0;
  line-height: 1.4;
}

/* ── Selector blocks (intent + timeframe) ─────────────────────────── */
.sh-selector-block {
  text-align: center;
}
.sh-selector-block:last-of-type {
  margin-bottom: 1.25rem;
}
.sh-selector-head {
  margin-bottom: 0.5rem;
}
.sh-selector-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-500, #888);
  margin: 0;
  letter-spacing: 0.01em;
}
.sh-selector-divider {
  width: 100%;
  height: 1px;
  background: var(--purple-100, #ede9fe);
  margin: 1.5rem 0;
}

/* ── Pill bars (intent + timeframe) ────────────────────────────────── */
.sh-pa-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.sh-pa-timeframes {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: nowrap;
}

/* Intent pills: outline style */
.sh-pa-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  min-height: 44px;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1.5px solid var(--purple-200, #d8b4fe);
  border-radius: 20px;
  background: #fff;
  color: var(--gray-700, #444);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  text-align: center;
}
.sh-pa-pill:hover {
  background: var(--purple-50, #f5f0ff);
  border-color: var(--purple-400, #a78bfa);
}
.sh-pa-pill.active {
  background: var(--purple-600, #7c3aed);
  border-color: var(--purple-600, #7c3aed);
  color: #fff;
  font-weight: 600;
}

/* Subtle visual dimming during loading — clicks still accepted
   by JS so the latest selection can be queued. */
.sh-plan-ahead-container.is-loading .sh-pa-pill:not(.active) {
  opacity: 0.6;
}

/* Timeframe pills: equal width, bolder active */
.sh-pa-tf-pill {
  flex: 1 1 0;
  max-width: 140px;
  min-height: 44px;
  justify-content: center;
  font-weight: 500;
}
.sh-pa-tf-pill.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  border-color: #6d28d9;
  color: #fff;
  font-weight: 700;
}

/* Mobile: intent pills as 2-column grid */
@media (max-width: 767px) {
  .sh-pa-intents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .sh-pa-intents .sh-pa-pill {
    width: 100%;
    min-height: 44px;
    padding: 0.45rem 0.4rem;
    font-size: 0.8rem;
  }
}

/* Desktop: cap intent chip width */
@media (min-width: 768px) {
  .sh-pa-pill {
    max-width: 200px;
  }
}

/* ── Best window highlight ─────────────────────────────────────────── */
.sh-pa-best {
  margin-bottom: 0.75rem;
}
.sh-pa-best-label,
.sh-pa-ranked-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700, #444);
  margin-bottom: 0.35rem;
}
.sh-pa-best-card {
  border-left: 3px solid var(--purple-500, #8b5cf6);
  background: linear-gradient(135deg, #f9f5ff 0%, #f3eaff 100%);
}

/* ── EI strip (compact, below best window) ────────────────────────── */
/* Inline EI summary inside best-window card */
.sh-ei-inline {
  font-size: 0.88rem;
  color: #6b6b6b;
  margin-top: 6px;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .sh-ei-inline {
    font-size: 0.82rem;
  }
}
/* Fallback hint inside best-window card */
.sh-pa-best-fallback-hint {
  width: 100%;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #999;
  line-height: 1.4;
  font-style: italic;
}
@media (max-width: 480px) {
  .sh-pa-best-fallback-hint {
    font-size: 0.7rem;
  }
}
/* Empty-state hint when no future ranked windows remain */
.sh-pa-ranked-empty-hint {
  font-size: 0.78rem;
  color: #999;
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-style: italic;
  line-height: 1.4;
}
.sh-pa-ei-strip {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  background: var(--purple-50, #f5f0ff);
  border: 1px solid var(--purple-100, #ede9fe);
}
.sh-ei-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.45;
}
.sh-ei-label {
  font-weight: 600;
  color: var(--purple-600, #7c3aed);
  white-space: nowrap;
  min-width: 4.5rem;
}
.sh-ei-label::after {
  content: ':';
}
.sh-ei-value {
  color: var(--gray-700, #444);
}
@media (max-width: 480px) {
  .sh-pa-ei-strip {
    padding: 0.45rem 0.65rem;
  }
  .sh-ei-row {
    font-size: 0.76rem;
  }
  .sh-ei-label {
    min-width: 3.8rem;
  }
}

/* ── Pattern Summary block ─────────────────────────────────────────── */
.sh-pa-pattern {
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f0ff 0%, #ede9fe 100%);
  border: 1px solid var(--purple-100, #ede9fe);
}
.sh-pa-pattern-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.sh-pa-pattern-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-800, #333);
  margin: 0;
}
/* ── Confidence badge (premium) ──────────────────────────────────── */
.sh-pa-conf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
  border: 1px solid rgba(123,44,191,0.18);
  background: rgba(123,44,191,0.06);
  color: rgba(55,20,90,0.88);
  transform: translateY(-1px);
  white-space: nowrap;
}
.sh-pa-conf--high {
  border-color: rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.08);
  color: rgba(20,83,45,0.92);
}
.sh-pa-conf--mid {
  border-color: rgba(123,44,191,0.22);
  background: rgba(123,44,191,0.07);
  color: rgba(55,20,90,0.88);
}
.sh-pa-conf--low {
  border-color: rgba(245,158,11,0.22);
  background: rgba(245,158,11,0.09);
  color: rgba(120,65,10,0.92);
}
.sh-pa-conf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
@media (max-width: 480px) {
  .sh-pa-conf-badge {
    padding: 4px 8px;
    font-size: 0.78rem;
  }
}
.sh-pa-pattern-body {
  font-size: 0.82rem;
  color: var(--gray-700, #444);
  line-height: 1.5;
  margin: 0 0 0.35rem;
}
.sh-pa-pattern-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.sh-pa-signal-chip {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--purple-700, #6b21a8);
  background: rgba(139, 92, 246, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--purple-200, #d8b4fe);
}
@media (max-width: 480px) {
  .sh-pa-pattern {
    padding: 0.5rem 0.65rem;
  }
  .sh-pa-pattern-title {
    font-size: 0.82rem;
  }
  .sh-pa-pattern-body {
    font-size: 0.76rem;
  }
  .sh-pa-signal-chip {
    font-size: 0.7rem;
  }
}

/* ── Window cards ──────────────────────────────────────────────────── */
.sh-pa-window-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--purple-100, #ede9fe);
  margin-bottom: 0.45rem;
  transition: box-shadow 0.15s;
}
.sh-pa-window-card:hover {
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}
/* Day separator between different dates in ranked list */
.sh-pa-day-sep {
  height: 1px;
  background: var(--purple-200, #d8b4fe);
  margin: 0.5rem 0;
  opacity: 0.5;
}
.sh-pa-wc-rank {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--purple-500, #8b5cf6);
  min-width: 24px;
}
.sh-pa-wc-planet {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-800, #333);
}
.sh-pa-wc-time {
  font-size: 0.82rem;
  color: var(--gray-600, #666);
}
.sh-pa-wc-score {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-500, #888);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}
/* Confidence pill in ranked cards */
.sh-confidence-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 14px;
  font-size: 0.73rem;
  font-weight: 500;
  background: rgba(139, 92, 246, 0.05);
  color: #5e5470;
  border: 1px solid rgba(139, 92, 246, 0.12);
  white-space: nowrap;
  line-height: 1.2;
}
.sh-confidence-pill .sh-pa-score-dot.high   ~ * ,
.sh-confidence-pill:has(.sh-pa-score-dot.high) {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.06);
  color: #3b7a52;
}
.sh-confidence-pill:has(.sh-pa-score-dot.medium) {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.06);
  color: #8a6320;
}
/* Flowing EI sentence under #1 ranked window */
.sh-pa-ei-inline {
  width: 100%;
  margin-top: 6px;
  font-size: 0.85rem;
  color: #6b5f7a;
  line-height: 1.4;
  font-weight: 400;
}
@media (max-width: 480px) {
  .sh-pa-ei-inline {
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* Tiny mindset hint for #2+ ranked windows */
.sh-pa-ei-hint {
  width: 100%;
  margin-top: 4px;
  font-size: 0.76rem;
  color: #9a8faa;
  line-height: 1.3;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-pa-score-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300, #ccc);
}
.sh-pa-score-dot.high {
  background: #22c55e;
}
.sh-pa-score-dot.medium {
  background: #f59e0b;
}

/* ── Intent description accordion ──────────────────────────────────── */
.sh-pa-intent-desc {
  margin-top: 1rem;
  margin-bottom: 0.65rem;
}
.sh-pa-desc-details {
  border: 1px solid var(--purple-100, #ede9fe);
  border-radius: 8px;
  background: var(--purple-50, #f5f0ff);
  overflow: hidden;
}
.sh-pa-desc-summary {
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--purple-600, #7c3aed);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  user-select: none;
}
.sh-pa-desc-summary::-webkit-details-marker { display: none; }
.sh-pa-desc-intent-label {
  font-weight: 600;
  color: var(--purple-700, #6b21a8);
}
.sh-pa-desc-dash {
  margin: 0 0.15rem;
  color: var(--purple-300, #c4b5fd);
}
.sh-pa-desc-toggle-text {
  font-weight: 400;
  color: var(--purple-500, #8b5cf6);
}
.sh-pa-desc-arrow {
  margin-left: auto;
  font-size: 0.65rem;
  transition: transform 0.25s ease;
}
.sh-pa-desc-arrow::after {
  content: '▼';
}
.sh-pa-desc-details[open] > .sh-pa-desc-summary .sh-pa-desc-arrow {
  transform: rotate(180deg);
}
.sh-pa-desc-body {
  padding: 0.25rem 0.75rem 0.5rem;
  text-align: left;
}
.sh-pa-desc-list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}
.sh-pa-desc-list li {
  font-size: 0.78rem;
  color: var(--gray-600, #666);
  line-height: 1.6;
}
@media (max-width: 480px) {
  .sh-pa-desc-summary { font-size: 0.74rem; padding: 0.35rem 0.6rem; }
  .sh-pa-desc-list li { font-size: 0.74rem; }
}

/* ── Scrollable ranked windows container ──────────────────────────── */
.sh-pa-ranked {
  max-height: 400px;
  overflow-y: auto;
  scroll-behavior: smooth;
  /* subtle fade at bottom to hint scrollability */
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}
.sh-pa-ranked:not(:empty) {
  padding-bottom: 0.25rem;
}
/* Remove fade mask when content fits (JS adds this class) */
.sh-pa-ranked.no-scroll {
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 480px) {
  .sh-pa-ranked {
    max-height: 340px;
  }
}

/* ── Status / loading / empty ──────────────────────────────────────── */
.sh-pa-status {
  text-align: center;
  font-size: 0.88rem;
  color: var(--gray-500, #888);
  padding: 1rem 0;
}

/* ── Mobile tweaks ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sh-pa-title {
    font-size: 1.05rem;
  }
  .sh-pa-pill {
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
    min-height: 42px;
  }
  .sh-pa-intents {
    gap: 8px;
  }
  .sh-pa-intents .sh-pa-pill {
    font-size: 0.76rem;
    padding: 0.38rem 0.35rem;
    min-height: 42px;
  }
  .sh-selector-title {
    font-size: 0.82rem;
  }
  .sh-pa-window-card {
    padding: 0.55rem 0.7rem;
    gap: 0.25rem 0.5rem;
  }
  .sh-pa-wc-planet {
    font-size: 0.86rem;
  }
  .sh-pa-wc-time {
    font-size: 0.78rem;
  }
  /* Date picker mobile */
  .sh-date-picker-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    text-align: center;
  }
  .sh-date-input {
    width: 100%;
  }
}