/* ==========================================================
   SMT Ajax Engine - Quick View Modal
========================================================== */

/* Body lock while modal is open */
body.smt-qv-locked {
    overflow: hidden;
}

/* ---- MODAL OVERLAY ---------------------------------------- */

.smt-qv-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.smt-qv-modal.smt-qv-open {
    display: flex;
    animation: smtQvFadeIn .2s ease;
}

@keyframes smtQvFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.smt-qv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 20, 0.65);
    backdrop-filter: blur(4px);
}

/* ---- MODAL WRAP ------------------------------------------- */

.smt-qv-wrap {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    width: 92vw;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    animation: smtQvSlideUp .25s ease;
}

@keyframes smtQvSlideUp {
    from { transform: translateY(24px) scale(.98); opacity: 0; }
    to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* ---- CLOSE BUTTON ----------------------------------------- */

.smt-qv-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    transition: background .15s, color .15s;
}

.smt-qv-close:hover {
    background: rgba(0, 0, 0, .12);
    color: #111;
}

/* ---- LOADING SPINNER -------------------------------------- */

.smt-qv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    flex: 1;
}

.smt-qv-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #4e8cff;
    border-radius: 50%;
    animation: smtQvSpin .7s linear infinite;
}

@keyframes smtQvSpin { to { transform: rotate(360deg); } }

/* ---- BODY - WC product HTML injected here ----------------- */

.smt-qv-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* WC product wrapper: two columns (gallery | summary) */
.smt-qv-body .product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
}

/* ---- WC GALLERY COLUMN ------------------------------------ */

.smt-qv-body .woocommerce-product-gallery {
    padding: 24px 18px 24px 24px;
    background: #f8f9fb;
    border-right: 1px solid #f0f1f4;
}

.smt-qv-body .woocommerce-product-gallery img {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    display: block;
}

/* ---- WC SUMMARY COLUMN ------------------------------------ */

.smt-qv-body .summary.entry-summary {
    padding: 32px 24px 24px 18px; /* extra top padding clears the close button */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- FOOTER - Go to Product link -------------------------- */

.smt-qv-footer {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid #f0f1f4;
    background: #fff;
}

.smt-qv-goto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px 20px;
    background: #1f2937;
    color: #fff !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}

.smt-qv-goto:hover { background: #111827; }

/* ---- RESPONSIVE ------------------------------------------- */

@media (max-width: 640px) {
    .smt-qv-wrap        { width: 100vw; max-width: 100%; border-radius: 16px 16px 0 0; max-height: 95vh; margin-top: auto; }
    .smt-qv-modal       { align-items: flex-end; }
    .smt-qv-body .product { grid-template-columns: 1fr; }
    .smt-qv-body .woocommerce-product-gallery { padding: 16px; border-right: none; border-bottom: 1px solid #f0f1f4; }
    .smt-qv-body .summary.entry-summary { padding: 16px; }
    .smt-qv-body .woocommerce-product-gallery img { max-height: 220px; }
}