/* Western Zodiac Daily Horoscope — RT-FUN-079
   星座運勢 — widget styling. The form shell + ad/section styling come from the
   platform tool layout; this file scopes the dh-* (daily-horoscope) components.
   VIOLET cosmic theme, accent #7C3AED. Loaded automatically by show.blade.php. */

.dh-form { display: flex; flex-direction: column; gap: 14px; }

.dh-disclaimer {
  padding: 10px 14px; background: #f5f3ff; border-left: 3px solid #7C3AED;
  border-radius: 0 6px 6px 0; font-size: 12.5px; color: var(--rt-accent); line-height: 1.5;
}

/* Sign picker */
.dh-picker-lbl {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: 6px;
}
.dh-sign-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
@media (max-width: 720px) { .dh-sign-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .dh-sign-grid { grid-template-columns: repeat(3, 1fr); } }

.dh-sign-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; background: #fff; border: 1px solid var(--rt-hairline);
  border-radius: 8px; cursor: pointer; transition: border-color 140ms ease, background 140ms ease;
}
.dh-sign-btn:hover { border-color: rgba(124,58,237,.4); background: #faf9ff; }
.dh-sign-btn[aria-pressed="true"] {
  border-color: #7C3AED; background: #EDE9FE; box-shadow: 0 0 0 2px rgba(124,58,237,.18);
}
.dh-btn-glyph { font-size: 22px; line-height: 1; color: #7C3AED; }
.dh-btn-name {
  font-family: var(--rt-font-sans); font-size: 11.5px; color: var(--rt-ink);
  text-align: center; line-height: 1.2;
}

/* Date input row */
.dh-date-row {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--rt-surface-2);
  border: 1px solid var(--rt-hairline); border-radius: 8px;
}
.dh-field { display: flex; flex-direction: column; gap: 4px; }
.dh-field label {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.dh-field input {
  padding: 10px 12px; border: 1px solid var(--rt-hairline); border-radius: 6px;
  font-size: 15px; background: #fff;
}
.dh-field input:focus {
  outline: none; border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.dh-date-hint { font-size: 12px; color: var(--rt-ink-muted); font-style: italic; flex: 1; }

.dh-actions { display: flex; gap: 8px; }
.dh-btn {
  padding: 9px 16px; font-size: 13px; border-radius: 6px; cursor: pointer;
  font-family: var(--rt-font-mono); text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.dh-btn-reset { background: #fff; color: #6d28d9; border: 1px solid rgba(124,58,237,.4); }
.dh-btn-reset:hover { background: #f5f3ff; }

/* Results */
.dh-results { padding: 0; background: transparent; }

.dh-today {
  font-size: 13px; color: var(--rt-ink-muted); padding: 8px 12px;
  background: #f5f3ff; border-radius: 6px; margin-bottom: 12px; text-align: center;
}
.dh-today strong { color: var(--rt-ink); }

/* Sign header */
.dh-sign-header {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  background: var(--rt-result-bg); color: var(--rt-result-ink);
  border: 1px solid rgba(124,58,237,.22); border-radius: 10px; margin-bottom: 14px;
}
.dh-sign-glyph {
  font-size: 44px; line-height: 1; color: #c4b5fd; flex-shrink: 0;
}
.dh-sign-name { font-family: var(--rt-font-sans); font-size: 22px; font-weight: 700; color: var(--rt-result-ink); }
.dh-sign-sub { font-size: 12.5px; color: var(--rt-result-muted); margin-top: 4px; }

/* Facet cards */
.dh-facets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .dh-facets { grid-template-columns: 1fr; } }
.dh-facet {
  padding: 14px 16px; background: #fff; border: 1px solid var(--rt-hairline);
  border-radius: 8px; border-left: 4px solid #7C3AED;
}
.dh-facet-overall  { border-left-color: #7C3AED; }
.dh-facet-love     { border-left-color: #db2777; }
.dh-facet-career   { border-left-color: #2563eb; }
.dh-facet-wellness { border-left-color: #16a34a; }
.dh-facet-lbl {
  font-family: var(--rt-font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; color: var(--rt-ink-muted); margin-bottom: 6px;
}
.dh-facet-body { font-size: 14px; line-height: 1.6; color: var(--rt-ink); margin: 0; }

/* Lucky badges */
.dh-lucky {
  display: flex; gap: 12px; flex-wrap: wrap; padding: 14px 18px;
  background: var(--rt-surface-2); border: 1px solid var(--rt-hairline); border-radius: 8px;
}
.dh-lucky-item { display: flex; align-items: center; gap: 8px; }
.dh-lucky-lbl {
  font-family: var(--rt-font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; color: var(--rt-ink-muted);
}
.dh-lucky-num {
  font-family: var(--rt-font-sans); font-size: 22px; font-weight: 700; color: #7C3AED;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.dh-lucky-swatch {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12);
  display: inline-block; flex-shrink: 0;
}
.dh-lucky-color { font-family: var(--rt-font-sans); font-size: 15px; color: var(--rt-ink); }