/* =========================================================
   packages.css — sirf packages.php ke liye (3 packages + finder chips)
   ========================================================= */
/* Finder chips */
.fq { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fq legend { width: 100%; font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .65); margin-bottom: .45rem; padding: 0; }
.fq input { position: absolute; opacity: 0; pointer-events: none; }
.fq span {
    display: inline-block; padding: .45rem .85rem; border-radius: 999px; cursor: pointer; font-size: .84rem; font-weight: 600;
    border: 1.5px solid rgba(255, 255, 255, .22); color: #fff; transition: all .2s cubic-bezier(.2, .7, .2, 1);
}
.fq span:hover { border-color: #fff; }
.fq input:checked + span { background: #fff; color: #012169; border-color: #fff; }
.fq input:focus-visible + span { outline: 3px solid #E4002B; outline-offset: 2px; }

/* 3 packages layout */
.tiers--3 { grid-template-columns: repeat(3, 1fr); max-width: 1080px; margin: 0 auto; gap: 1.6rem; }
.tiers--3 .tier__inner { padding: 1.9rem 1.7rem 1.7rem; }
.builder__bases--3 { grid-template-columns: repeat(3, 1fr); }
.tier__level i:nth-child(1) { height: 9px; } .tier__level i:nth-child(2) { height: 14px; } .tier__level i:nth-child(3) { height: 20px; }
@media (max-width: 1100px) { .tiers--3 { grid-template-columns: 1fr 1fr; } .tiers--3 .tier:last-child { grid-column: 1 / -1; max-width: 520px; width: 100%; justify-self: center; } }
@media (max-width: 640px) { .tiers--3 { grid-template-columns: 1fr; } .tiers--3 .tier:last-child { max-width: none; } .builder__bases--3 { grid-template-columns: 1fr; } }