/* =====================================================
   LANDING — Label informasi kuota prodi
   (jumlah pendaftar & sisa kuota = kuota - pendaftar yang sudah membayar)
   Dipakai di kartu "Program Studi Tersedia" dan panel di Formulir Pendaftaran.
   ===================================================== */
.pq {
    --pq-c: #0f8a7e;          /* warna teks/aksen */
    --pq-fill: #2ec4b6;       /* warna bar */
    --pq-bg: #f2fcf9;
    --pq-bd: #c4efe8;
    --pq-pct: 0%;
    position: relative;
    margin: 4px 0 2px;
    padding: 12px 14px 12px;
    border: 1px solid var(--pq-bd);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--pq-bg), #fff);
    font-variant-numeric: tabular-nums;
    container-type: inline-size;
    min-width: 0;
}
.pq-menipis { --pq-c: #9a6b00; --pq-fill: #ffb703; --pq-bg: #fff9e8; --pq-bd: #ffe5a0; }
.pq-kritis  { --pq-c: #c1272d; --pq-fill: #e63946; --pq-bg: #fff3f4; --pq-bd: #f7cdd0; }
.pq-habis   { --pq-c: #8f1424; --pq-fill: #b0182b; --pq-bg: #f6f6f8; --pq-bd: #e1e3ea; }

.pq-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pq-status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 8px 3px 7px; border-radius: 50px;
    font-size: .7rem; font-weight: 700; letter-spacing: .1px; color: var(--pq-c); white-space: nowrap;
    background: #fff; border: 1px solid var(--pq-bd);
}
.pq-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--pq-fill); flex: none; }
.pq-kritis .pq-status i, .pq-menipis .pq-status i { animation: pqBlink 1.4s ease-in-out infinite; }
.pq-pct { font-size: .68rem; font-weight: 600; color: var(--gray); white-space: nowrap; }

.pq-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pq-stat {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center;
    padding: 8px 10px; border-radius: 11px; background: #fff; border: 1px solid #edf0fa; min-width: 0;
}
.pq-stat i { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .85rem; color: var(--primary); background: #eef1ff; }
.pq-stat b { font-size: 1.15rem; line-height: 1.1; font-weight: 800; color: var(--dark); }
.pq-stat span { font-size: .66rem; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; color: var(--gray); white-space: nowrap; }
.pq-stat-sisa i { color: var(--pq-c); background: var(--pq-bg); }
.pq-stat-sisa b { color: var(--pq-c); }

.pq-bar { margin-top: 10px; height: 8px; border-radius: 50px; background: rgba(20,33,61,.08); overflow: hidden; }
.pq-bar i { display: block; height: 100%; width: var(--pq-pct); min-width: 0; border-radius: 50px; background: var(--pq-fill); transition: width 1s cubic-bezier(.4,0,.2,1); }
.pq-kritis .pq-bar i, .pq-habis .pq-bar i {
    background-image: linear-gradient(135deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%);
    background-size: 22px 22px; animation: pqStripe .9s linear infinite;
}
.pq-foot { margin-top: 7px; font-size: .72rem; line-height: 1.4; color: var(--gray); }

.pq-slot { margin-top: auto; }
.prodi-card .pq-slot + .btn { margin-top: 12px; }
.btn-prodi-penuh, .btn-prodi-penuh:hover { cursor: not-allowed; color: #8a8fa0; border-color: #d9dce6; background: #f3f4f8; transform: none; box-shadow: none; }
.btn-prodi-penuh i { margin-right: 4px; }

/* ---------- Panel info di Formulir Pendaftaran (langkah 1) ---------- */
.pq-form { margin-top: 10px; animation: pqIn .35s ease both; }
.pq-form[hidden] { display: none; }
.pq-form .pq { margin: 0; }
.pq-note {
    display: flex; gap: 8px; align-items: flex-start; margin-top: 9px; padding-top: 9px;
    border-top: 1px dashed var(--pq-bd); font-size: .75rem; line-height: 1.5; color: var(--dark);
}
.pq-note i { margin-top: 2px; color: var(--pq-c); }

@keyframes pqIn     { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pqBlink  { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes pqStripe { from { background-position: 0 0; } to { background-position: 22px 0; } }

/* Kartu sempit (grid 4 kolom di desktop): sembunyikan ikon agar angka & label tidak terpotong */
@media (max-width: 250px) {
    .pq-stat { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 8px 10px; }
    .pq-stat i { display: none; }
    .pq-stat b { font-size: 1.2rem; }
}

@media (max-width: 480px) {
    .pq { padding: 11px 12px; }
    .pq-stat b { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pq-bar i, .pq-form, .pq-status i, .pq-bar i { animation: none !important; transition: none !important; }
}