/* ==========================================================
Project : Counter Doodle
Module  : Component
File    : product-detail.css
Popup detail produk (js/components/product-detail.js).
========================================================== */

.product-popup {
    display: grid;
    grid-template-columns: var(--popup-image-size) minmax(0, 1fr);
    gap: var(--space-32);
    align-items: start;
    text-align: left;
}

.product-popup-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.product-popup-image,
.product-popup-noimage {
    width: var(--popup-image-size);
    height: var(--popup-image-size);
    border-radius: var(--radius-lg);
}

.product-popup-image {
    object-fit: cover;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.product-popup-noimage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    border: var(--border-width-thick) dashed var(--color-border-strong);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.product-popup-noimage svg {
    width: var(--icon-xl);
    height: var(--icon-xl);
    stroke: currentColor;
    stroke-width: var(--icon-stroke-thin);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-popup-desc {
    padding: var(--space-16);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

.product-popup-desc-title {
    margin-bottom: var(--space-8);
    font-weight: var(--font-bold);
}

.product-popup-desc p {
    color: var(--color-text-secondary);
    line-height: var(--line-normal);
}

.product-popup-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-muted);
}

.product-popup-name {
    margin: var(--space-4) 0 var(--space-8);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-bold);
}

.product-popup-table {
    width: 100%;
    margin-top: var(--space-16);
    border-collapse: collapse;
}

.product-popup-table td {
    padding: var(--space-8) 0;
    border-bottom: var(--border-width) solid var(--color-border);
}

.product-popup-table td:first-child {
    width: var(--col-xl);
    color: var(--color-text-secondary);
    font-weight: var(--font-semibold);
}

.product-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-12);
    margin-top: var(--space-24);
}