/* General container for the product info display */
.wpid-product-info-display {
    /*font-family: 'Inter', sans-serif;*/
	    font-family: inherit;
    /*margin-top: 20px;*/
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Common styling for info items */
.wpid-info-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    padding-right: 45px; /* Add sufficient padding to the right for the absolute icon */
    border-bottom: 1px solid #f0f0f0;
    position: relative; /* Keep relative for absolute positioning */
}

.wpid-info-item:last-child {
    border-bottom: none; /* No border for the last item */
}

.wpid-info-icon {
    flex-shrink: 0; /* Prevent icon from shrinking */
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpid-info-icon img {
    display: block;
    border-radius: 4px; /* Slightly rounded corners for icons */
}

.wpid-info-content {
    flex-grow: 1; /* Allow content to take available space */
    margin-right: 20px; /* Add margin to prevent content from overlapping the absolute icon */
}

.wpid-info-title {
    margin: 0;
    font-size: 1em;
    color: #333;
    font-weight: 600;
}

.wpid-info-text {
    margin: 5px 0 0;
    font-size: 0.75em;
    color: #666;
    line-height: 1.4;
}

/* New styles for "View More" icon */
.wpid-view-more {
    position: absolute;
    right: 15px; /* Position relative to the parent item's padding-right */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpid-view-more-link {
    display: block;
    line-height: 1; /* Ensure no extra space around the image */
}

.wpid-view-more-link img {
    display: block;
    /* Icon size for view more is set dynamically in PHP to icon_size / 2 */
    border-radius: 50%; /* Make it circular */
    transition: transform 0.2s ease-in-out;
}

.wpid-view-more-link:hover img {
    transform: scale(1.1); /* Slight hover effect */
}


/* Vertical Layout Specific Styles */
.wpid-layout-vertical .wpid-info-item {
    flex-direction: row; /* Default flex direction */
}

/* Horizontal Layout Specific Styles (Grid) */
.wpid-layout-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 20px; /* Space between grid items */
}

.wpid-layout-horizontal .wpid-info-item {
    flex-direction: column; /* Stack icon and content vertically */
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background-color: #f9f9f9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.wpid-layout-horizontal .wpid-info-icon {
    margin-right: 0;
    margin-bottom: 10px; /* Space below icon */
}

.wpid-layout-horizontal .wpid-info-item:last-child {
    border-bottom: 1px solid #e0e0e0; /* Re-add border for last item in horizontal grid */
}

.wpid-layout-horizontal .wpid-view-more {
    position: static; /* Reset positioning for horizontal layout */
    transform: none;
    margin-top: 10px; /* Space below content */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .wpid-layout-horizontal {
        grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
    }
}

/* Admin styles for media uploader preview */
.wpid-icon-upload-wrapper .wpid-icon-preview img {
    border: 1px solid #ddd;
    padding: 5px;
    background-color: #fff;
    border-radius: 4px;
}

.wpid-icon-upload-wrapper .wpid-remove-button {
    margin-left: 10px;
}

/* New CSS for highlighting specific values */
.wpid-highlight-value {
    color: #d73028; /* The requested color */
    font-weight: 600; /* Make it stand out a bit more */
}

.wpid-product-installments-display {
	border-bottom: 1px solid #f3f3f3!important;
}