/* Vastu Flow Panchang: izgled. Sve je ograničeno na .vfp-root da ne dira temu. */
.vfp-root, .vfp-modal {
  /* Boje se preuzimaju iz palete teme (theme.json); ako ih nema, važe iste vrednosti. */
  --vfp-ink: var(--wp--preset--color--mastilo, #16242A);
  --vfp-line: var(--wp--preset--color--linija, #C8CEC5);
  --vfp-muted: var(--wp--preset--color--mastilo-meko, #46555A);
  --vfp-accent: var(--wp--preset--color--sumska, #1E4A43);
  --vfp-accent-d: var(--wp--preset--color--sumska-duboka, #12302B);
  --vfp-soft: var(--wp--preset--color--krecnjak, #F1F2ED);
  --vfp-sage: var(--wp--preset--color--zalfija, #DCE6E0);
  --vfp-saffron: var(--wp--preset--color--safran, #D38A1F);
  --vfp-saffron-l: var(--wp--preset--color--safran-svetli, #F3DDB7);
  --vfp-card: var(--wp--preset--color--karta, #FAFAF7);
  --vfp-good: var(--vfp-accent);
  --vfp-bad: #B3261E;
  --vfp-warn: var(--vfp-saffron);
  line-height: 1.5;
  color: var(--vfp-ink);
}
.vfp-root { max-width: 1100px; margin: 0 auto; }
.vfp-root *, .vfp-root *::before, .vfp-root *::after { box-sizing: border-box; }

.vfp-controls { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin: 0 0 1.25rem; padding: 1rem; background: var(--vfp-soft); border: 1px solid var(--vfp-line); border-radius: 6px; }
.vfp-controls label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--vfp-muted); }
.vfp-controls select, .vfp-controls input { padding: .45rem .6rem; border: 1px solid var(--vfp-line); border-radius: 6px; background: var(--vfp-card); font: inherit; color: inherit; }
.vfp-controls button { padding: .5rem 1.1rem; border: 0; border-radius: 6px; background: var(--vfp-accent); color: #fff; font: inherit; cursor: pointer; }
.vfp-controls button:hover { filter: brightness(1.1); }
.vfp-reset { align-self: center; color: var(--vfp-accent); }

.vfp-disclaimer { margin: 0 0 1.25rem; padding: .9rem 1.2rem; background: var(--vfp-card); border: 1px solid var(--vfp-line); border-left: 4px solid var(--vfp-saffron); border-radius: 6px; font-size: .82rem; line-height: 1.7; color: var(--vfp-muted); }
.vfp-notice { padding: .6rem .9rem; background: var(--vfp-saffron-l); border: 1px solid var(--vfp-saffron); border-radius: 6px; }

.vfp-card { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--vfp-line); border-radius: 6px; background: var(--vfp-card); }
.vfp-card-head { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; }
.vfp-card h2 { margin: 0; font-size: 1.4rem; }
.vfp-card h3 { margin: 1.25rem 0 .5rem; font-size: 1.05rem; }
.vfp-sub { margin: 0; color: var(--vfp-muted); flex-basis: 100%; }
.vfp-help { display: block; margin: .15rem 0 0; font-size: .85rem; color: var(--vfp-muted); }
.vfp-off { color: var(--vfp-line); }

.vfp-daynav { display: flex; gap: 1rem; font-size: .95rem; }
.vfp-daynav a { color: var(--vfp-accent); }

.vfp-limbs { display: grid; gap: .75rem; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .vfp-limbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vfp-limbs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 480px) { .vfp-limbs { grid-template-columns: 1fr; } }
.vfp-limb { padding: .7rem .8rem; background: var(--vfp-soft); border-radius: 6px; font-size: .88rem; }
.vfp-limb dt { font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vfp-accent); cursor: help; }
.vfp-limb dd { margin: .25rem 0 0; }
.vfp-limb ul { margin: 0; padding: 0; list-style: none; }
.vfp-root .vfp-limb li { padding: .3rem .5rem; margin: .2rem 0; border-left: 3px solid transparent; line-height: 1.35; }
.vfp-name { display: block; font-weight: 600; font-size: .95rem; }
.vfp-time { display: block; font-size: .8rem; color: var(--vfp-muted); }
.vfp-root .vfp-limb li.vfp-current { background: var(--vfp-card); border-left-color: var(--vfp-accent); }
.vfp-current em { color: var(--vfp-accent); font-style: normal; font-size: .75rem; font-weight: 600; }

.vfp-facts { display: grid; gap: .75rem 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); font-size: .92rem; }
.vfp-facts li { padding: .1rem 0 .1rem .7rem; border-left: 3px solid var(--vfp-line); font-weight: 600; }
.vfp-facts li span { display: block; margin: 0 0 .1rem; font-size: .78rem; font-weight: 400; color: var(--vfp-muted); }

.vfp-periods { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vfp-periods li { font-size: .9rem; padding: .6rem .8rem; border-left: 4px solid var(--vfp-line); background: var(--vfp-soft); border-radius: 0 6px 6px 0; }
.vfp-q-good { border-left-color: var(--vfp-good) !important; }
.vfp-q-bad { border-left-color: var(--vfp-bad) !important; }
.vfp-q-caution { border-left-color: var(--vfp-warn) !important; }

.vfp-table-wrap { overflow-x: auto; margin-top: 1rem; }
.vfp-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vfp-table th, .vfp-table td { padding: .4rem .55rem; text-align: left; border-bottom: 1px solid var(--vfp-line); white-space: nowrap; }
.vfp-table thead th { color: var(--vfp-muted); font-weight: 600; font-size: .85rem; }
.vfp-table tbody th { font-weight: 600; }

/* Retrogradne planete su crvene, u tabeli i na karti. */
tr.vfp-retro th, tr.vfp-retro td { color: var(--vfp-bad); font-weight: 600; }

.vfp-chart { margin: 0; text-align: center; }
.vfp-chart figcaption { font-weight: 700; margin-bottom: .4rem; }
.vfp-chart-svg { width: 100%; max-width: 460px; height: auto; }
.vfp-line { fill: none; stroke: var(--vfp-muted); stroke-width: 2; }
.vfp-sign { font-size: 13px; fill: var(--vfp-muted); }
.vfp-planets { font-size: 17px; font-weight: 600; fill: var(--vfp-ink); }
.vfp-planets tspan.vfp-retro { fill: var(--vfp-bad); font-weight: 800; }
.vfp-lagna, .vfp-moment { margin: .9rem 0 0; }
.vfp-moment span { color: var(--vfp-muted); margin-right: .35rem; }

.vfp-cal { width: 100%; table-layout: fixed; border-collapse: collapse; min-width: 560px; }
.vfp-cal th { padding: .35rem; font-size: .8rem; color: var(--vfp-muted); }
.vfp-cal td { height: 5.6rem; padding: .3rem .4rem; vertical-align: top; border: 1px solid var(--vfp-line); font-size: .78rem; overflow: hidden; }
.vfp-cal .vfp-empty { background: var(--vfp-card); }
.vfp-dn { display: block; font-weight: 700; font-size: .95rem; color: inherit; text-decoration: none; }
a.vfp-dn { color: var(--vfp-accent); }
.vfp-tithi { display: block; font-weight: 600; }
.vfp-tithi small { color: var(--vfp-muted); font-weight: 400; }
.vfp-tnum { display: none; font-weight: 700; }
.vfp-nak { display: block; color: var(--vfp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vfp-cal td.vfp-purnima { background: var(--vfp-saffron-l); }
.vfp-cal td.vfp-amavasya { background: #DDE1E4; }
.vfp-cal td.vfp-ekadashi { background: var(--vfp-sage); }
.vfp-cal td.vfp-today { outline: 3px solid var(--vfp-accent); outline-offset: -3px; }
.vfp-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .85rem; }
.vfp-legend li::before { content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; border: 1px solid var(--vfp-line); vertical-align: -1px; }
.vfp-legend .vfp-purnima::before { background: var(--vfp-saffron-l); }
.vfp-legend .vfp-amavasya::before { background: #DDE1E4; }
.vfp-legend .vfp-ekadashi::before { background: var(--vfp-sage); }

.vfp-cta { margin: 0 0 1.5rem; padding: 1.5rem; text-align: center; border-radius: 6px; background: var(--vfp-accent); color: #fff; }
.vfp-cta h2 { margin: 0 0 .5rem; color: inherit; font-size: 1.4rem; }
.vfp-cta-text { margin: 0 auto 1rem; max-width: 40rem; }
.vfp-cta-button { display: inline-block; padding: .65rem 1.5rem; border-radius: 6px; background: var(--vfp-saffron); color: var(--vfp-ink); font-weight: 700; text-decoration: none; }
.vfp-cta-button:hover { filter: brightness(.95); }

/* Uski ekrani: kalendar bez vodoravnog klizanja, tithi se prikazuje brojem. */
@media (max-width: 600px) {
  .vfp-card { padding: .9rem; }
  .vfp-cal { min-width: 0; }
  .vfp-cal td { height: 3.4rem; padding: .2rem; font-size: .68rem; }
  .vfp-dn { font-size: .85rem; }
  .vfp-cal .vfp-tithi, .vfp-cal .vfp-nak { display: none; }
  .vfp-cal .vfp-tnum { display: block; }
  .vfp-controls { padding: .75rem; }
}

/* Prozor sa detaljima dana (telefon). */
.vfp-pop { display: none; }
.vfp-noscroll { overflow: hidden; }
.vfp-modal[hidden] { display: none; }
.vfp-modal { position: fixed; inset: 0; z-index: 99999; }
.vfp-modal *, .vfp-modal *::before, .vfp-modal *::after { box-sizing: border-box; }
.vfp-modal-bg { position: absolute; inset: 0; background: rgba(22, 36, 42, .5); }
.vfp-modal-box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; padding: 1.1rem 1.1rem 1.4rem; background: var(--vfp-card); border-radius: 6px 6px 0 0; box-shadow: 0 -10px 40px rgba(22, 36, 42, .25); font-size: .92rem; }
.vfp-modal-x { position: absolute; top: .4rem; right: .5rem; width: 44px; height: 44px; border: 0; background: none; font-size: 1.9rem; line-height: 1; color: var(--vfp-muted); cursor: pointer; }
.vfp-modal-body h3 { margin: 0 2.5rem .2rem 0; font-size: 1.2rem; }
.vfp-modal-body .vfp-pop-sub { margin: 0 0 .6rem; color: var(--vfp-muted); }
.vfp-modal-body h4 { margin: .9rem 0 .2rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vfp-accent); }
.vfp-modal-body ul { margin: 0; padding: 0; list-style: none; }
.vfp-modal-body li { padding: .3rem .5rem; margin: .2rem 0; border-left: 3px solid transparent; line-height: 1.35; }
.vfp-modal-body li.vfp-current { border-left-color: var(--vfp-accent); }
.vfp-modal-body .vfp-name { display: block; font-weight: 600; }
.vfp-modal-body .vfp-time { display: block; font-size: .8rem; color: var(--vfp-muted); }
.vfp-modal-body .vfp-pop-link { display: block; margin-top: 1.1rem; padding: .7rem 1rem; border-radius: 6px; background: var(--vfp-accent); color: #fff; font-weight: 600; text-align: center; text-decoration: none; }
@media (min-width: 601px) { .vfp-modal { display: none !important; } }