/* ============================================================
   Hindu Horoscope Pro — Frontend Styles
   Version: 1.0.0
   Compatible with all WordPress themes (fully scoped under .hh-*)
   ============================================================ */

/* ── CSS Variables / Themes ───────────────────────────────── */
:root {
  --hh-primary:      #D4600A;
  --hh-primary-light:#F48C27;
  --hh-primary-dark: #A84800;
  --hh-accent:       #F5A623;
  --hh-bg:           #FFF8F0;
  --hh-bg-card:      #FFFFFF;
  --hh-bg-dark:      #1A1209;
  --hh-text:         #2C1A00;
  --hh-text-muted:   #6B5740;
  --hh-border:       #E8D5B7;
  --hh-shadow:       rgba(212,96,10,0.12);
  --hh-radius:       12px;
  --hh-radius-sm:    8px;
  --hh-font:         inherit;
  --hh-transition:   0.25s ease;
}
[data-hh-theme="ocean"] {
  --hh-primary:      #0D6EFD;
  --hh-primary-light:#3D8BFF;
  --hh-primary-dark: #0A4DB8;
  --hh-accent:       #00C9E4;
  --hh-bg:           #F0F6FF;
  --hh-border:       #C5D8FF;
  --hh-shadow:       rgba(13,110,253,0.12);
}
[data-hh-theme="forest"] {
  --hh-primary:      #1A6B2A;
  --hh-primary-light:#2A9D3C;
  --hh-primary-dark: #0F4218;
  --hh-accent:       #52C41A;
  --hh-bg:           #F0FBF2;
  --hh-border:       #B7E0C0;
  --hh-shadow:       rgba(26,107,42,0.12);
}
[data-hh-theme="royal"] {
  --hh-primary:      #6B21A8;
  --hh-primary-light:#9333EA;
  --hh-primary-dark: #4A1777;
  --hh-accent:       #C084FC;
  --hh-bg:           #FAF5FF;
  --hh-border:       #DDD6FE;
  --hh-shadow:       rgba(107,33,168,0.12);
}
[data-hh-theme="minimal"] {
  --hh-primary:      #222222;
  --hh-primary-light:#444444;
  --hh-primary-dark: #000000;
  --hh-accent:       #888888;
  --hh-bg:           #F8F8F8;
  --hh-border:       #DDDDDD;
  --hh-shadow:       rgba(0,0,0,0.10);
}

/* ── Base wrapper ─────────────────────────────────────────── */
.hh-wrapper {
  font-family:    var(--hh-font);
  font-size:      1rem;
  color:          var(--hh-text);
  background:     var(--hh-bg);
  border:         1px solid var(--hh-border);
  border-radius:  var(--hh-radius);
  padding:        24px;
  box-shadow:     0 4px 24px var(--hh-shadow);
  box-sizing:     border-box;
  max-width:      100%;
}
.hh-wrapper *, .hh-wrapper *::before, .hh-wrapper *::after {
  box-sizing: border-box;
}

/* ── Type Tabs ────────────────────────────────────────────── */
.hh-type-tabs {
  display:        flex;
  gap:            6px;
  flex-wrap:      wrap;
  margin-bottom:  20px;
  border-bottom:  2px solid var(--hh-border);
  padding-bottom: 0;
}
.hh-tab-btn {
  background:     transparent;
  border:         none;
  border-bottom:  3px solid transparent;
  color:          var(--hh-text-muted);
  cursor:         pointer;
  font-size:      0.92rem;
  font-weight:    600;
  padding:        8px 18px;
  margin-bottom: -2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:     color var(--hh-transition), border-color var(--hh-transition);
}
.hh-tab-btn:hover {
  color:          var(--hh-primary);
}
.hh-tab-btn.hh-active {
  color:          var(--hh-primary);
  border-bottom-color: var(--hh-primary);
}

/* ── Layout: card + calendar side by side ─────────────────── */
.hh-main-layout {
  display:   flex;
  gap:       24px;
  align-items: flex-start;
}
.hh-card-column {
  flex: 1 1 0;
  min-width: 0;
}
.hh-calendar-column {
  flex: 0 0 280px;
  min-width: 240px;
}
@media (max-width: 720px) {
  .hh-main-layout    { flex-direction: column; }
  .hh-calendar-column { flex: 1 1 100%; }
}

/* ── Sign Badge ───────────────────────────────────────────── */
.hh-sign-badge {
  display:       flex;
  align-items:   center;
  gap:           14px;
  background:    linear-gradient(135deg, var(--hh-primary), var(--hh-primary-dark));
  color:         #fff;
  border-radius: var(--hh-radius);
  padding:       16px 20px;
  margin-bottom: 16px;
}
.hh-sign-symbol {
  font-size:   2.8rem;
  line-height: 1;
  flex-shrink: 0;
}
.hh-sign-names {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.hh-sign-hindi {
  font-size:   1.4rem;
  font-weight: 700;
  line-height: 1.2;
}
.hh-sign-english {
  font-size:   1rem;
  opacity:     0.88;
}
.hh-sign-meta {
  margin-left: auto;
  text-align:  right;
  font-size:   0.8rem;
  opacity:     0.82;
  line-height: 1.6;
}
.hh-sep { margin: 0 4px; }

/* ── Period Bar ───────────────────────────────────────────── */
.hh-period-bar {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--hh-bg-card);
  border:        1px solid var(--hh-border);
  border-left:   4px solid var(--hh-primary);
  border-radius: var(--hh-radius-sm);
  padding:       10px 14px;
  margin-bottom: 16px;
  font-size:     0.9rem;
  color:         var(--hh-text-muted);
}
.hh-period-icon { flex-shrink: 0; }
.hh-period-label { font-weight: 600; color: var(--hh-primary-dark); }

/* ── Content Area ─────────────────────────────────────────── */
.hh-content-area {
  background:    var(--hh-bg-card);
  border:        1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  padding:       22px 24px;
  min-height:    120px;
  position:      relative;
  transition:    opacity var(--hh-transition);
}
.hh-horoscope-text {
  font-size:      1.05rem;
  line-height:    1.9;
  color:          var(--hh-text);
  margin:         0;
}
.hh-horoscope-text::first-letter {
  font-size:      1.6em;
  font-weight:    700;
  color:          var(--hh-primary);
  float:          left;
  margin:         0.05em 0.08em 0 0;
  line-height:    1;
}

/* ── Loading Spinner ──────────────────────────────────────── */
.hh-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         36px;
  color:           var(--hh-text-muted);
  font-size:       0.9rem;
}
.hh-spinner {
  width:            24px;
  height:           24px;
  border:           3px solid var(--hh-border);
  border-top-color: var(--hh-primary);
  border-radius:    50%;
  animation:        hh-spin 0.7s linear infinite;
  flex-shrink:      0;
}
@keyframes hh-spin { to { transform: rotate(360deg); } }

/* ── Error / Notice ───────────────────────────────────────── */
.hh-error-box {
  background:    #FFF0F0;
  border:        1px solid #FFB3B3;
  border-left:   4px solid #E00;
  border-radius: var(--hh-radius-sm);
  padding:       14px 18px;
  font-size:     0.88rem;
  color:         #800;
}
.hh-no-key-box {
  background:    #FFF8E1;
  border:        1px solid #FFCA28;
  border-left:   4px solid #FF8F00;
  border-radius: var(--hh-radius-sm);
  padding:       14px 18px;
  font-size:     0.9rem;
  color:         #5D4037;
}

/* ── Rashi Grid (all-horoscopes) ──────────────────────────── */
.hh-rashi-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap:                   8px;
  margin-bottom:         20px;
}
.hh-rashi-tile {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  background:     var(--hh-bg-card);
  border:         2px solid var(--hh-border);
  border-radius:  var(--hh-radius-sm);
  padding:        10px 6px;
  cursor:         pointer;
  transition:     all var(--hh-transition);
  text-align:     center;
}
.hh-rashi-tile:hover {
  border-color: var(--hh-primary-light);
  background:   var(--hh-bg);
  transform:    translateY(-2px);
}
.hh-rashi-tile.hh-active {
  border-color: var(--hh-primary);
  background:   linear-gradient(135deg, var(--hh-primary) 0%, var(--hh-primary-dark) 100%);
  color:        #fff;
}
.hh-tile-symbol  { font-size: 1.6rem; line-height: 1; }
.hh-tile-hindi   { font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.hh-tile-english { font-size: 0.65rem; opacity: 0.75; }

/* ── Calendar ─────────────────────────────────────────────── */
.hh-calendar {
  background:    var(--hh-bg-card);
  border:        1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  overflow:      hidden;
  user-select:   none;
}
.hh-cal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--hh-primary);
  color:           #fff;
  padding:         10px 14px;
}
.hh-cal-header h4 {
  margin:      0;
  font-size:   0.92rem;
  font-weight: 700;
  text-align:  center;
  flex:        1;
  color:       #fff;
}
.hh-cal-nav {
  background:     transparent;
  border:         none;
  color:          rgba(255,255,255,0.85);
  cursor:         pointer;
  font-size:      1.2rem;
  padding:        2px 8px;
  border-radius:  4px;
  transition:     background var(--hh-transition);
  line-height:    1;
}
.hh-cal-nav:hover { background: rgba(255,255,255,0.15); }
.hh-cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
}
.hh-cal-dow {
  text-align:    center;
  font-size:     0.68rem;
  font-weight:   700;
  text-transform:uppercase;
  color:         var(--hh-text-muted);
  padding:       6px 2px;
  background:    var(--hh-bg);
}
.hh-cal-day {
  text-align:  center;
  font-size:   0.82rem;
  padding:     6px 2px;
  cursor:      pointer;
  border-radius: 50%;
  margin:      2px;
  transition:  background var(--hh-transition), color var(--hh-transition);
  color:       var(--hh-text);
  line-height: 1.4;
}
.hh-cal-day:hover { background: var(--hh-bg); }
.hh-cal-day.hh-today {
  font-weight:   700;
  color:         var(--hh-primary);
  border:        1px solid var(--hh-primary);
}
.hh-cal-day.hh-selected {
  background:  var(--hh-primary);
  color:       #fff;
  font-weight: 700;
}
.hh-cal-day.hh-other-month { color: var(--hh-border); cursor: default; }
.hh-cal-day.hh-in-range    { background: rgba(212,96,10,0.12); }
.hh-cal-empty { /* grid placeholder */ }

/* Week row highlight */
.hh-cal-week-row { display: contents; }
.hh-cal-week-row.hh-selected-week .hh-cal-day:not(.hh-other-month) {
  background: rgba(212,96,10,0.1);
}

/* ── Inline sign badge ────────────────────────────────────── */
.hh-sign-inline {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    linear-gradient(135deg, var(--hh-primary), var(--hh-primary-dark));
  color:         #fff;
  border-radius: var(--hh-radius-sm);
  padding:       6px 14px;
  font-size:     0.9rem;
}
.hh-sign-inline.hh-sign-small  { font-size: 0.78rem; padding: 4px 10px; }
.hh-sign-inline.hh-sign-large  { font-size: 1.1rem;  padding: 10px 20px; }
.hh-sign-inline .hh-sign-symbol{ font-size: 1.3em; }
.hh-sign-lord { font-size: 0.78em; opacity: 0.82; }

/* ── Panchang Table ───────────────────────────────────────── */
.hh-panchang-table-wrap {
  margin-top: 20px;
}
.hh-panchang-title {
  font-size:     1rem;
  font-weight:   700;
  color:         var(--hh-primary-dark);
  margin-bottom: 10px;
}
.hh-panchang-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.87rem;
}
.hh-panchang-table th,
.hh-panchang-table td {
  padding:       8px 12px;
  border-bottom: 1px solid var(--hh-border);
  text-align:    left;
}
.hh-panchang-table th {
  width:       40%;
  color:       var(--hh-text-muted);
  font-weight: 600;
  background:  var(--hh-bg);
}
.hh-planet-positions { margin-top: 16px; }
.hh-planet-positions h4 {
  font-size:     0.9rem;
  font-weight:   700;
  color:         var(--hh-primary-dark);
  margin-bottom: 8px;
}
.hh-planet-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   6px;
}
.hh-planet-item {
  display:       flex;
  flex-direction:column;
  background:    var(--hh-bg);
  border:        1px solid var(--hh-border);
  border-radius: 6px;
  padding:       8px 10px;
  font-size:     0.8rem;
}
.hh-planet-name { font-weight: 700; color: var(--hh-primary-dark); }
.hh-planet-pos  { color: var(--hh-text-muted); margin-top: 2px; }

/* ── Date display, title, subtitle shortcodes ─────────────── */
.hh-date-display    { color: var(--hh-primary); font-weight: 600; }
.hh-section-title   { color: var(--hh-primary-dark); }
.hh-section-subtitle{ color: var(--hh-text-muted); font-size: 0.95rem; }

/* ── Fade transition when loading new horoscope ───────────── */
.hh-content-area.hh-fading { opacity: 0.4; }

/* ── Panchang inline (below horoscope) ───────────────────── */
.hh-panchang-area {
  margin-top:    12px;
  padding-top:   12px;
  border-top:    1px dashed var(--hh-border);
}

/* ── Divider ──────────────────────────────────────────────── */
.hh-divider {
  border: none;
  border-top: 1px solid var(--hh-border);
  margin: 16px 0;
}

/* ══════════════════════════════════════════
   ADMIN STYLES (scoped to .hh-admin-wrap)
   ══════════════════════════════════════════ */
.hh-admin-wrap { max-width: 1100px; }
.hh-admin-grid {
  display:               grid;
  grid-template-columns: 1fr 320px;
  gap:                   24px;
  margin-top:            20px;
}
@media (max-width: 900px) { .hh-admin-grid { grid-template-columns: 1fr; } }
.hh-admin-card {
  background:    #fff;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  padding:       20px 24px;
  margin-bottom: 20px;
}
.hh-admin-card h2 { margin-top: 0; font-size: 1.1rem; }
.hh-admin-card h3 { margin-top: 0; font-size: 1rem; }
.hh-admin-card code {
  display:       block;
  background:    #f1f5f9;
  border-radius: 4px;
  padding:       4px 8px;
  font-size:     0.82rem;
  margin:        4px 0 10px;
  word-break:    break-all;
}
.hh-api-status {
  border-radius: 6px;
  padding:       10px 14px;
  font-size:     0.88rem;
  margin-bottom: 14px;
}
.hh-api-ok   { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.hh-api-warn { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }

.hh-guide-wrap {}
.hh-guide-card {
  background:    #fff;
  border:        1px solid #e2e8f0;
  border-radius: 8px;
  padding:       20px 24px;
  margin-bottom: 16px;
}
.hh-guide-card h2 { margin-top: 0; font-size: 1.05rem; }
.hh-guide-card pre {
  background:    #f1f5f9;
  border-radius: 6px;
  padding:       10px 14px;
  font-size:     0.84rem;
  overflow-x:    auto;
}
.hh-guide-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.86rem;
  margin-bottom:   12px;
}
.hh-guide-table th { background: #f8fafc; text-align: left; padding: 6px 10px; border: 1px solid #e2e8f0; }
.hh-guide-table td { padding: 6px 10px; border: 1px solid #e2e8f0; vertical-align: top; }
.hh-guide-table code { background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-size: 0.82em; }