/* Basic styling for the Vira Product List plugin */

.vira-product-list-container {
    margin-top: 20px;
}

.vira-product-list-container .ui-accordion-header {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
}

.vira-product-list-container .ui-accordion-content {
    padding: 15px;
    border: 1px solid #eee;
    border-top: none;
    background-color: #fff;
    overflow: auto;
}

.vira-product-list-container .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.vira-product-list-container .product-item {
    border: 1px solid #eee;
    padding: 10px;
    text-align: right;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    justify-content: flex-start;
    min-height: 80px;
}

.vira-product-list-container .product-item .product-image {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px;
}

.vira-product-list-container .product-item .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-bottom: 0;
}

.vira-product-list-container .product-item .product-details-right {
    display: flex;
    flex-direction: column;
    text-align: right;
    flex-grow: 1;
    justify-content: space-between;
    height: 100%;
}

.vira-product-list-container .product-item .product-top-row,
.vira-product-list-container .product-item .product-bottom-row {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
}

.vira-product-list-container .product-item .product-top-row {
    margin-bottom: 5px;
}

.vira-product-list-container .product-item .product-id-box {
    background-color: #808080;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-left: 10px;
    flex-shrink: 0;
}

.vira-product-list-container .product-item .product-name {
    font-weight: bold;
    margin-bottom: 0;
    flex-grow: 1;
    text-align: right;
    line-height: 1.2;
}

.vira-product-list-container .product-item .product-name a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.vira-product-list-container .product-item .product-name a:hover {
    text-decoration: underline;
}

.vira-product-list-container .product-item .product-bottom-row {
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
}

.vira-product-list-container .product-item .product-price {
    color: #0073aa;
    font-size: 1.1em;
    margin-bottom: 0;
    flex-grow: 1;
    text-align: left;
}

.vira-product-list-container .details-button {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 0;
    flex-shrink: 0;
}

.vira-product-list-container .details-button:hover {
    background-color: #005177;
}

/* jQuery UI Dialog overrides for popup */
.ui-dialog {
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-radius: 8px;
}

.ui-dialog .ui-dialog-titlebar {
    background-color: #0073aa;
    color: white;
    padding: 10px;
    border-radius: 8px 8px 0 0;
}

.ui-dialog .ui-dialog-title {
    font-weight: bold;
}

.ui-dialog .ui-dialog-titlebar-close {
    color: white;
}

.ui-dialog .ui-dialog-content {
    padding: 20px;
}

.ui-dialog .ui-dialog-buttonpane {
    background-color: #f0f0f0;
    padding: 10px 20px;
    border-top: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
}

.ui-dialog .ui-dialog-buttonpane button {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
}

.ui-dialog .ui-dialog-buttonpane button:hover {
    background-color: #005177;
}

.product-detail-item p {
    margin-bottom: 8px;
}

.product-detail-item ul {
    list-style: none;
    padding: 0;
}

.product-detail-item ul li {
    margin-bottom: 5px;
}

/* Popup Styling */
#product-details-popup {
    /* Remove fixed width/height, let jQuery UI handle positioning with 'center' option */
    /* width: auto; */ /* Handled by JS maxWidth and content */
    /* height: auto; */ /* Handled by JS and content */
    max-width: 50vw; /* Adjust max width to be half of the viewport width */
    max-height: 80vh; /* Max height to prevent popup from going off screen on wide monitors */
    overflow: auto;
}

.product-details-dialog.ui-dialog {
    position: fixed !important; /* Force fixed positioning */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important; /* Remove any default margins */
    z-index: 1050 !important; /* Ensure dialog is on top */
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-radius: 8px;
}

.product-details-dialog .ui-dialog-content {
    flex-grow: 1;
    overflow: auto;
    padding: 20px;
}

/* Ensure the overlay is visible and covers the whole screen */
.ui-widget-overlay {
    opacity: 0.7; /* Adjust as needed */
    background: #000; /* Dark overlay */
    z-index: 1040; /* Ensure overlay is below dialog but above other content */
}

#product-details-popup .popup-content {
    /* No specific width/height here, content will flow */
}

/* Responsive adjustments for Tablets and Mobiles */
@media (max-width: 768px) {
    #product-details-popup {
        width: 88vw !important; /* Tablet: 88% of viewport width */
        max-width: 88vw !important;
        max-height: 90vh; /* Max height for smaller screens */
    }
}

@media (max-width: 480px) {
    #product-details-popup {
        width: 98vw !important; /* Mobile: 98% of viewport width */
        max-width: 98vw !important;
        max-height: 90vh;
    }
    
    .product-details-dialog.ui-dialog {
        width: 98vw !important;
        max-width: 98vw !important;
        transform: translate(-1%, -50%) !important;
    }
}