/* ─── HOROSCOPE & BIRTHDAY ─────────────────────────────────────────────────
   v50 — visual upgrade. Standalone stylesheet so the proper frontend
   rebuild can replace it cleanly without surgery in HTML. */

/* ─── Birthday card (lives on city_home + horoscope page) ─────────────── */

.hr-bday {
  background: linear-gradient(135deg, #fff8f1 0%, #fff5e8 100%);
  border: 1px solid rgba(201, 123, 59, 0.15);
  border-radius: 16px;
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
}

.hr-bday::before {
  /* subtle decorative blob top-right */
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(201, 123, 59, 0.08), transparent);
  pointer-events: none;
}

.hr-bday-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.hr-bday-cake {
  font-size: 32px;
  line-height: 1;
}

.hr-bday-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c97b3b;
  font-weight: 700;
  margin-bottom: 2px;
}

.hr-bday-date {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}

.hr-bday-forecast {
  font-size: 16px;
  line-height: 1.65;
  color: #2a2a2a;
  margin: 18px 0 24px 0;
}

.hr-shares-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 600;
  margin-bottom: 12px;
}

.hr-shares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.hr-share {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  transition: background 0.15s ease;
}
.hr-share:hover { background: rgba(255, 255, 255, 0.85); }

.hr-share img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.hr-share-name {
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.3;
}

.hr-share-desc {
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.4;
  margin-top: 2px;
}

.hr-read-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c97b3b;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 0;
  transition: gap 0.15s ease;
}
.hr-read-all:hover { gap: 10px; text-decoration: underline; }

/* ─── Weekly horoscope page — 12 sign grid ────────────────────────────── */

.hr-week-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c97b3b;
  font-weight: 700;
  margin-bottom: 4px;
}

.hr-week-title {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 32px 0;
  letter-spacing: -0.01em;
}

.hr-signs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.hr-sign {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hr-sign:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.hr-sign-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.hr-sign-glyph {
  font-size: 32px;
  line-height: 1;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sign-bg, #f5f5f5);
  color: var(--sign-color, #555);
  flex-shrink: 0;
}

.hr-sign-name {
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  text-transform: capitalize;
  letter-spacing: -0.005em;
}

.hr-sign-dates {
  font-size: 11.5px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.hr-sign-body p {
  margin: 0;
  line-height: 1.6;
  font-size: 14.5px;
  color: #2a2a2a;
}

.hr-sign-empty {
  color: rgba(0, 0, 0, 0.45);
  font-style: italic;
  font-size: 14px;
}

/* Per-sign colors — element-based palette for cohesion */
/* Fire signs: warm red/orange */
.hr-sign[data-sign="aries"]      { --sign-bg: #fde8e1; --sign-color: #d4422a; }
.hr-sign[data-sign="leo"]        { --sign-bg: #fff0d6; --sign-color: #c97b3b; }
.hr-sign[data-sign="sagittarius"]{ --sign-bg: #fde4d1; --sign-color: #b65928; }

/* Earth signs: green / earthy */
.hr-sign[data-sign="taurus"]     { --sign-bg: #e8f1de; --sign-color: #5a8a3a; }
.hr-sign[data-sign="virgo"]      { --sign-bg: #ddebd5; --sign-color: #4a7a2f; }
.hr-sign[data-sign="capricorn"]  { --sign-bg: #e2e5d4; --sign-color: #5e6845; }

/* Air signs: light blue / sky */
.hr-sign[data-sign="gemini"]     { --sign-bg: #e0eff5; --sign-color: #3a7a98; }
.hr-sign[data-sign="libra"]      { --sign-bg: #e6f0f5; --sign-color: #467a90; }
.hr-sign[data-sign="aquarius"]   { --sign-bg: #d8e8f0; --sign-color: #336a8a; }

/* Water signs: deep blue/violet */
.hr-sign[data-sign="cancer"]     { --sign-bg: #e0e3f0; --sign-color: #4955a0; }
.hr-sign[data-sign="scorpio"]    { --sign-bg: #ddd5ea; --sign-color: #6438a8; }
.hr-sign[data-sign="pisces"]     { --sign-bg: #d6dfee; --sign-color: #3b528a; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .hr-bday          { padding: 24px 22px; }
  .hr-bday-date     { font-size: 24px; }
  .hr-week-title    { font-size: 26px; }
  .hr-signs-grid    { grid-template-columns: 1fr; }
}