/* ============================================================
   share.css — 黄历  ·  Share image card + desktop popover
   Requires: base.css (design tokens)
   ============================================================ */

/* ============================================================
   OFF-SCREEN SHARE CARD
   Positioned off-screen so html2canvas can capture it without
   it being visible. Must NOT be display:none — html2canvas
   cannot render hidden elements.
   ============================================================ */
#share-card {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 390px;
  background: #FDF6E3;
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  /* No border-radius or box-shadow — clean pixel edges for PNG export */
}

/* ── Header — mirrors the app's .date-bar mobile layout ───── */
/*    Left : Chinese lunar date + ganzhi                       */
/*    Right: Large western day number + year/month/weekday     */
.sc-header {
  background: #C0392B;
  border-bottom: 3px solid #D4AC0D;
}

/* Two-column date row (matches .date-bar in calendar.css) */
.sc-date-bar {
  display: flex;
  align-items: stretch;
}

/* Left column: lunar title + ganzhi */
.sc-date-lunar {
  flex: 1;
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sc-lunar-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-bottom: 6px;
  white-space: nowrap;
}
.sc-gz {
  font-size: 11.5px;
  color: #FFE88A;
  line-height: 1.7;
}

/* Right column: large day number (matches .date-solar) */
.sc-date-solar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 14px;
  background: rgba(0, 0, 0, 0.13);
  min-width: 115px;
}
.sc-solar-num {
  font-size: 58px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
  flex-shrink: 0;
}
.sc-solar-right {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sc-solar-ym {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
}
.sc-solar-wd {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.3;
}

/* ── Festival / Solar term tags row ──────────────────────── */
.sc-tags {
  background: #C0392B;
  padding: 0 20px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sc-tag-fest {
  background: #D4AC0D;
  color: #1A1A1A;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 9px;
  letter-spacing: 0.5px;
  line-height: 1.8;
}
.sc-tag-term {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 9px;
  letter-spacing: 0.5px;
  line-height: 1.8;
}

/* ── 宜忌 ─────────────────────────────────────────────────── */
.sc-yiji {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #EDD9A3;
}
.sc-yi,
.sc-ji { padding: 12px 16px 14px; }
.sc-yi { border-right: 1px solid #EDD9A3; }
.sc-yiji-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.sc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sc-dot-yi { background: #1E8449; }
.sc-dot-ji { background: #C0392B; }
.sc-yi-label { color: #1E8449; }
.sc-ji-label { color: #C0392B; }
.sc-yiji-items {
  font-size: 12px;
  color: #3D3D3D;
  line-height: 2;
}

/* ── Metadata row (6 columns: 值神, 纳音, 冲煞, 建除, 胎神, 星宿) ─── */
.sc-info {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid #EDD9A3;
}
.sc-info-col {
  padding: 7px 2px;
  text-align: center;
  border-right: 1px solid #EDD9A3;
}
.sc-info-col:last-child { border-right: none; }
.sc-info-label {
  font-size: 9.5px;
  color: #888;
  letter-spacing: 0.2px;
  margin-bottom: 3px;
}
.sc-info-value {
  font-size: 12px;
  font-weight: 600;
  color: #1A1A1A;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.sc-info-value-sm { font-size: 10px; }

/* ── 时辰 grid (13 cells) ────────────────────────────────── */
.sc-hours-label {
  font-size: 11px;
  color: #888;
  font-weight: 700;
  padding: 6px 16px 2px;
  letter-spacing: 0.5px;
}
.sc-hours {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  border-bottom: 1px solid #EDD9A3;
}
.sc-hour-cell {
  padding: 4px 1px;
  text-align: center;
  border-right: 1px solid #EDD9A3;
}
.sc-hour-cell:last-child { border-right: none; }
.sc-hour-gz {
  font-size: 11px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.3;
}
.sc-hour-luck { font-size: 10px; font-weight: 600; }
.sc-hour-good { color: #1E8449; }
.sc-hour-bad  { color: #C0392B; }

/* ── 彭祖百忌 ────────────────────────────────────────────── */
.sc-pengzu {
  padding: 8px 16px 10px;
  font-size: 11px;
  color: #3D3D3D;
  line-height: 2;
  background: #F5E6C8;
  border-bottom: 1px solid #EDD9A3;
}
.sc-pengzu-title {
  font-size: 11px;
  font-weight: 700;
  color: #666;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

/* ── Footer: QR + branding ──────────────────────────────── */
.sc-footer {
  background: #F5E6C8;
  border-top: 2px solid #C4A35A;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sc-footer-text { flex: 1; }
.sc-footer-brand {
  font-size: 26px;
  font-weight: 700;
  color: #C0392B;
  letter-spacing: 1px;
  line-height: 1;
}
.sc-footer-url {
  font-size: 11px;
  color: #6E5A38;
  margin-top: 5px;
  letter-spacing: 0.3px;
}
.sc-footer-scan {
  font-size: 10px;
  color: #999;
  margin-top: 3px;
}
#share-qr-container canvas,
#share-qr-container img {
  display: block;
  width: 80px !important;
  height: 80px !important;
}

/* ============================================================
   SHARE LINKS  (in the detail panel, below day-detail)
   ============================================================ */
.share-links {
  padding: 10px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--paper-mid);
  background: var(--paper-dark);
}
.share-links[hidden] { display: none; }

.share-links-label {
  font-size: 12px;
  color: #888;
  margin-right: 2px;
}

.share-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 13px;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.share-link-btn:hover { background: var(--paper-dark); border-color: var(--red); }
.share-link-btn:active { opacity: 0.8; }
.share-link-btn:disabled { opacity: 0.55; cursor: wait; }

/* ============================================================
   DESKTOP SHARE POPOVER
   ============================================================ */
.share-popover {
  position: fixed;
  z-index: 600;
  background: #fff;
  border: 1px solid var(--paper-mid);
  border-radius: 14px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.18);
  width: 280px;
  overflow: hidden;
  font-family: var(--font);
}
.share-popover[hidden] { display: none; }

/* Popover header */
.share-pop-header {
  background: var(--red);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.share-pop-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 3px;
}
.share-pop-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 17px;
  cursor: pointer;
  padding: 0 3px;
  line-height: 1;
  transition: color 0.15s;
}
.share-pop-close:hover { color: #fff; }

/* Popover sections */
.share-pop-section {
  padding: 11px 14px;
  border-bottom: 1px solid var(--paper-mid);
}
.share-pop-section:last-child { border-bottom: none; }

.share-pop-label {
  font-size: 10px;
  font-weight: 700;
  color: #c0a87a;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 7px;
}

/* Action buttons inside popover */
.share-pop-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--paper-mid);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 5px;
  text-align: left;
  position: relative;
}
.share-pop-btn:last-of-type { margin-bottom: 0; }
.share-pop-btn:hover {
  background: var(--paper-dark);
  border-color: var(--red);
}
.share-pop-btn .pop-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.pop-feedback {
  margin-left: auto;
  font-size: 11px;
  color: var(--green);
  opacity: 0;
  transition: opacity 0.2s;
  font-weight: 600;
}
.share-pop-btn.pop-copied .pop-feedback { opacity: 1; }