/* Shared pricing product selector (shared/pricing_product_nav.html).

   Loaded by all four pricing pages: /pricing (card variant, above the Tax Q&A
   plans) and /pricing/wht|vat|zakat (compact `.is-strip` variant near the top).
   Keeps the quiet pricing look: 8px radius, no gradients, tokens from app.css. */

.pricing-nav { margin: 28px 0 0; }

.pricing-nav .pnav-head { margin: 0 0 14px; }
.pricing-nav .pnav-head h2 { font-size: 19px; margin: 0 0 4px; color: var(--amt-ink); letter-spacing: -.2px; }
.pricing-nav .pnav-head p  { font-size: 13.5px; color: var(--amt-muted); margin: 0; line-height: 1.5; }

.pnav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }

.pnav-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none;
             background: var(--amt-surface); border: 1px solid var(--amt-border);
             border-radius: 8px; padding: 14px 16px; }
.pnav-card:hover { border-color: var(--amt-primary); background: #f7fbfa; }
.pnav-card.is-active { border-color: var(--amt-primary); background: var(--amt-subtle);
                       box-shadow: inset 0 0 0 1px var(--amt-primary); }

.pnav-title   { font-size: 14px; font-weight: 700; color: var(--amt-ink); line-height: 1.35; }
.pnav-desc    { font-size: 12.5px; color: var(--amt-muted); line-height: 1.45; flex: 1; }
.pnav-price   { font-size: 13px; font-weight: 600; color: var(--amt-primary); }
.pnav-current { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
                color: var(--amt-primary); }

/* Compact strip for the package pages: same links, no marketing copy. */
.pricing-nav.is-strip { margin: 22px 0 0; }
.pricing-nav.is-strip .pnav-strip-label { font-size: 11px; font-weight: 700; letter-spacing: .6px;
                                           text-transform: uppercase; color: var(--amt-muted);
                                           margin: 0 0 8px; }
.pricing-nav.is-strip .pnav-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.pricing-nav.is-strip .pnav-card { padding: 10px 13px; gap: 3px; }
.pricing-nav.is-strip .pnav-desc { display: none; }
.pricing-nav.is-strip .pnav-title { font-size: 13px; }
.pricing-nav.is-strip .pnav-price { font-size: 12px; }
.pricing-nav.is-strip .pnav-current { font-size: 10px; }

/* Pure-LTR price strings must not be reordered under RTL; the anchor stays RTL. */
[dir="rtl"] .pnav-price { text-align: right; }

@media (max-width: 560px) {
    .pnav-grid, .pricing-nav.is-strip .pnav-grid { grid-template-columns: 1fr; }
}