/* ═══════════════════════════════════════════════════════════════════════════
   tools-shared.css — CSS shared by the free-tool templates (views/tools-*.ejs).
   Extracted 2026-08-15 from the byte-identical inline copies.

   Deliberately NOT here (they differ per page and must stay in each template's
   inline <style>, which loads AFTER this file so the template copy wins):
     .toolx-ribbon (base)     — Hindi pages drop uppercase + tighten spacing
     .toolx-form-grid (base)  — horary pages are single-column / 640px
     .toolx-form-grid-1       — must cascade after .toolx-form-grid
     .toolx-list li / .toolx-olist li — Hindi pages use 0.92rem / 1.7
     mobile .toolx-ribbon / .toolx-form-grid / .toolx-submit overrides

   CACHE RULE: 1-year immutable caching — bump the ?v= query on EVERY change.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── City geocode autocomplete (the 5 birth-detail tools; profile-form.ejs
      keeps its own inline copy) ── */
.city-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(11,18,36,0.98); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; max-height: 300px; overflow-y: auto;
  display: none; z-index: 100; margin-top: 4px;
}
.city-dropdown.active { display: block; }
.city-option {
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s; font-size: 0.9rem;
}
.city-option:hover, .city-option.highlighted { background: rgba(218,165,32,0.15); }
.city-option .city-name { color: #fff; font-weight: 500; }
.city-option .city-detail { color: #aaa; font-size: 0.8rem; margin-top: 2px; }
.city-option .city-coords { color: var(--solar-gold,#daa520); font-size: 0.75rem; font-family: monospace; }
.city-dropdown .city-loading, .city-dropdown .city-no-results {
  padding: 12px 14px; color: #aaa; font-size: 0.85rem; text-align: center;
}
.field-hint { font-size: 0.75rem; color: #9aa0a6; margin-top: 4px; margin-bottom: 0; }
.coord-field { background: rgba(218,165,32,0.05) !important; cursor: not-allowed; }

/* ── Uniform free-tool card (.toolx-*) — pricing .plans4-* design language.
      Common subset only; see header note for the per-page deltas. ── */
.toolx-card { padding: 0 1.8rem 1.8rem; position: relative; overflow: hidden; }
.toolx-full { grid-column: 1 / -1; }
.toolx-label { display: block; margin-bottom: 0.4rem; font-weight: 600; }
.toolx-label-sm { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; }
.toolx-hint { display: block; font-size: 0.75rem; color: #9aa0a6; margin-top: 4px; }
.toolx-mb1 { margin-bottom: 1rem; }
.toolx-modes { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.toolx-modes .btn { flex: 1; min-width: 140px; }
.toolx-dms-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.75rem; }
.toolx-submit { width: 100%; }
.toolx-error { margin-top: 1rem; padding: 1rem; background: rgba(255,80,80,0.1); border: 1px solid rgba(255,80,80,0.4); border-radius: 8px; color: #ff8080; }
.toolx-loading { margin-top: 1rem; padding: 1rem; text-align: center; color: #9ca3af; }
.toolx-results-panel { margin-top: 2rem; padding: 1.25rem 1.4rem; border: 1px solid rgba(218,165,32,0.3); border-radius: 12px; background: rgba(218,165,32,0.05); }
.toolx-list { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.toolx-list li::before { content: '✓'; position: absolute; left: 0; color: var(--solar-gold,#daa520); font-weight: 700; }
.toolx-olist { margin: 0 0 0.8rem; padding-left: 1.5rem; }
.toolx-olist li::marker { color: var(--solar-gold,#daa520); font-weight: 700; }
.toolx-faq details { margin-bottom: 0.8rem; padding: 0.85rem 1.05rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.02); }
.toolx-faq summary { cursor: pointer; font-weight: 600; }
.toolx-faq details[open] summary { color: var(--solar-gold,#daa520); }
.toolx-faq details p { margin: 0.75rem 0 0; }
@media (max-width: 640px) {
  .toolx-card { padding: 0 1.2rem 1.2rem; }
}