/* =====================================================================================
   FILE BARU: assets/css/pw-catalog.css
   Gaya bersama kartu kursus & Pratinjau Cepat untuk index.php dan courses.php.
   Pasangan: includes/catalog_helpers.php & assets/js/pw-catalog.js
   Semua warna memakai variabel --sol-* (ikut tema Solarized Dark & Light).
===================================================================================== */

/* Perataan ikon SVG di dalam teks & tombol */
.pw-ico { flex-shrink: 0; vertical-align: -0.15em; }

/* Penanda kata yang cocok dengan pencarian */
mark.pw-hl { background: var(--sol-accent-soft); color: inherit; padding: 0 0.15em; border-radius: 0.25em; box-shadow: inset 0 -2px 0 var(--sol-accent); }

/* Tombol sekunder "Tutup" di Pratinjau Cepat (aturan proyek: warnai lewat --bs-btn-* untuk semua state) */
.pw-qv-secondary {
    --bs-btn-color: var(--sol-text-main);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sol-border-soft);
    --bs-btn-hover-color: var(--sol-text-bright);
    --bs-btn-hover-bg: var(--sol-accent-soft);
    --bs-btn-hover-border-color: var(--sol-accent);
    --bs-btn-active-color: var(--sol-text-bright);
    --bs-btn-active-bg: var(--sol-accent-soft);
    --bs-btn-active-border-color: var(--sol-accent);
    border: 2px solid var(--sol-border-soft);
    color: var(--sol-text-main);
    background: transparent;
}
.btn.pw-qv-secondary:hover, .btn.pw-qv-secondary:focus-visible, .btn.pw-qv-secondary:active {
    background: var(--sol-accent-soft); border-color: var(--sol-accent); color: var(--sol-text-bright);
}


    /* ===============================================
       6b. BARU: INFO KARTU KURSUS (diskon, meta, hitung mundur)
    =============================================== */
    .pc-discount {
        display: inline-block;
        padding: 0.3rem 0.7rem;
        border-radius: 50px;
        background: var(--sol-error);
        color: #ffffff;
        font-weight: 800; font-size: 0.75rem; letter-spacing: 0.5px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    .pc-meta {
        display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
        margin-bottom: 0.9rem;
        font-size: 0.8rem; font-weight: 600;
        color: var(--sol-text-muted);
    }
    .pc-meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
    .pc-meta .pc-star { color: var(--sol-warning); }
    .pc-meta .pc-hot { color: var(--sol-success); } /* BARU: +N minggu ini */

    .pw-price .pc-strike {
        display: block;
        font-size: 0.9rem; font-weight: 600;
        color: var(--sol-text-muted);
        text-decoration: line-through;
    }
    .pw-price .pc-timer {
        display: inline-flex; align-items: center; gap: 0.35rem;
        margin-top: 0.5rem;
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        background: var(--sol-accent-soft);
        border: 1px solid var(--sol-border-soft);
        color: var(--sol-text-main);
        font-size: 0.78rem; font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
    .pw-price .pc-normal { display: none; }
    /* Promo habis saat halaman masih terbuka: JS menambah .promo-ended, harga normal muncul */
    .pw-price.promo-ended .pc-promo { display: none; }
    .pw-price.promo-ended .pc-normal { display: block; }
    .promo-ended-card .pc-discount { display: none; }

    /* Tombol Pratinjau Cepat: menutupi area gambar. Hanya muncul bila JS + <dialog> didukung. */
    .pw-qv-btn {
        display: none;
        position: absolute; inset: 0; z-index: 2;
        align-items: flex-end; justify-content: center;
        padding: 0 0 0.9rem 0;
        border: 0; background: transparent; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .pw-qv-ready .pw-qv-btn { display: flex; }
    .pw-qv-pill {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.4rem 1rem;
        border-radius: 50px;
        background: var(--sol-glass-bg, var(--sol-bg-card));
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border: 1px solid var(--sol-border-soft);
        color: var(--sol-text-bright);
        font-size: 0.82rem; font-weight: 700;
        box-shadow: 0 6px 16px var(--sol-shadow-color);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    }
    .pw-qv-btn:focus-visible { outline: 2px solid var(--sol-accent); outline-offset: -4px; }
    @media (hover: hover) and (pointer: fine) {
        .pw-qv-pill { opacity: 0; transform: translate3d(0, 10px, 0); }
        .pw-qv-host:hover .pw-qv-pill, .pw-qv-btn:focus-visible .pw-qv-pill { opacity: 1; transform: none; }
    }
    @media (hover: none) {
        .pw-qv-pill { padding: 0.3rem 0.8rem; font-size: 0.76rem; }
    }


    /* ===============================================
       6f. BARU: JENDELA PRATINJAU CEPAT (<dialog> bawaan browser)
       Desktop: kartu di tengah. HP: lembar dari bawah layar (bottom sheet).
    =============================================== */
    html:has(.pw-qv[open]) { overflow: hidden; }
    .pw-qv {
        width: min(760px, calc(100% - 2rem));
        max-height: calc(100dvh - 3rem);
        padding: 0;
        border: 1px solid var(--sol-border-soft);
        border-radius: 1.5rem;
        background: var(--sol-bg-card);
        color: var(--sol-text-main);
        box-shadow: 0 25px 60px rgba(0,0,0,0.45);
        overflow: hidden;
    }
    .pw-qv::backdrop {
        background: rgba(0, 20, 26, 0.6);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    .pw-qv[open] { animation: qvIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
    .pw-qv[open]::backdrop { animation: qvFade 0.4s ease; }
    .pw-qv.is-closing { animation: qvOut 0.22s ease-in forwards; }
    .pw-qv.is-closing::backdrop { animation: qvFade 0.22s ease-in reverse forwards; }
    @keyframes qvIn  { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.96); } to { opacity: 1; transform: none; } }
    @keyframes qvOut { to { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.97); } }
    @keyframes qvFade { from { opacity: 0; } to { opacity: 1; } }

    .pw-qv-inner { display: grid; grid-template-columns: 1fr 1.15fr; max-height: inherit; }
    .pw-qv-media { position: relative; background: var(--sol-grid-line); min-height: 100%; }
    .pw-qv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pw-qv-media .pw-qv-noimg { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 220px; color: var(--sol-text-muted); }
    .pw-qv-body { padding: 2rem 1.75rem 1.5rem; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
    .pw-qv-cat { display: block; margin-bottom: 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--sol-accent); }
    .pw-qv-title { color: var(--sol-text-bright); font-weight: 800; line-height: 1.3; margin-bottom: 0.75rem; padding-right: 2rem; }
    .pw-qv-desc { font-size: 0.92rem; line-height: 1.7; margin-bottom: 1.25rem; }
    .pw-qv-price { padding: 1rem; border-radius: 1rem; background: var(--sol-bg-main); border: 1px solid var(--sol-border-soft); text-align: center; margin-bottom: 1.25rem; }
    .pw-qv-price .pc-amount { font-size: 1.6rem; font-weight: 800; margin: 0; }
    .pw-qv-actions { display: flex; flex-direction: column; gap: 0.6rem; }
    .pw-qv-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--sol-text-muted); }
    .pw-qv-note .pw-ico { color: var(--sol-success); }
    .pw-qv-close {
        position: absolute; top: 0.9rem; right: 0.9rem; z-index: 5;
        width: 40px; height: 40px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--sol-border-soft);
        background: var(--sol-bg-card); color: var(--sol-text-bright);
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pw-qv-close:hover { background: var(--sol-accent); color: #ffffff; transform: rotate(90deg); }
    .pw-qv-close:focus-visible { outline: 2px solid var(--sol-accent); outline-offset: 2px; }
    .pw-qv-handle { display: none; }

/* HP: Pratinjau Cepat menjadi bottom sheet */
@media (max-width: 767.98px) {
        .pw-qv {
            width: 100%; max-width: 100%;
            margin: auto 0 0 0;
            max-height: 90dvh;
            border-radius: 1.5rem 1.5rem 0 0;
            border-bottom: 0;
        }
        .pw-qv[open] { animation: qvSheetIn 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
        .pw-qv.is-closing { animation: qvSheetOut 0.25s ease-in forwards; }
        @keyframes qvSheetIn  { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
        @keyframes qvSheetOut { to { transform: translate3d(0, 100%, 0); } }
        .pw-qv-inner { grid-template-columns: 1fr; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }
        .pw-qv-media { min-height: 0; aspect-ratio: 2 / 1; }
        .pw-qv-media .pw-qv-noimg { min-height: 0; }
        .pw-qv-body { overflow: visible; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
        .pw-qv-handle {
            display: block;
            position: absolute; top: 8px; left: 50%; z-index: 5;
            width: 44px; height: 5px; margin-left: -22px;
            border-radius: 5px; background: rgba(255,255,255,0.7);
            box-shadow: 0 1px 4px rgba(0,0,0,0.4);
        }
        .pw-qv-close { top: 0.75rem; right: 0.75rem; }
}

/* Hormati pengaturan "kurangi gerakan" */
@media (prefers-reduced-motion: reduce) {
    .pw-qv-pill { opacity: 1 !important; transform: none !important; }
    .pw-qv[open], .pw-qv[open]::backdrop, .pw-qv.is-closing { animation-duration: 0.001ms !important; }
}