/**
 * Product Category Customizer - Frontend Stylesheet
 * Provides base layout and styling for the category grid.
 * Dynamic styles (colors, sizes, columns) are added inline via PHP.
 *
 * Version: 1.0.1
 */

/* Grid Container */
.pcc-category-grid {
	display: grid;
	gap: 15px; /* Default gap between items */
	margin-bottom: 20px; /* Space below the grid */
	/* grid-template-columns are applied via inline styles */
}

/* Individual Category Item Container */
.pcc-category-item {
	position: relative; /* For potential absolute positioning inside */
	overflow: hidden; /* Prevents content spillover, helps with border-radius */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease;
    display: flex; /* Use flexbox for alignment within the item */
    flex-direction: column; /* Stack image/title vertically */
}

.pcc-category-item:hover {
	transform: translateY(-4px);
    transition: transform 0.3s ease-in-out;
	border-color: #d6262c;
}

/* Link Wrapping the Item Content */
.pcc-category-link {
	display: flex; /* Use flex to control content layout */
    flex-direction: column; /* Stack image/title */
    flex-grow: 1; /* Allow link to fill the item */
	text-decoration: none;
	color: inherit; /* Inherit text color from parent */
	height: 100%;
	text-align: center; /* Center title text */
}

/* Image Wrapper Div (Used for Background Image) */
.pcc-category-image-wrapper {
	width: 100%; /* Take full width of the item */
	position: relative;
    background-color: #f0f0f0; /* Fallback background if image fails */
    background-size: cover; /* Scale image to cover the div */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat;
    transition: transform 0.3s ease; /* For hover effect */
    border: none; /* Explicitly remove border from the image wrapper */
    /* Height and border-radius are applied via inline styles with !important */
    /* Default height if none provided by settings */
    min-height: 100px;
}


/* Category Title */
.pcc-category-title {
	margin: 10px 10px 15px 10px; /* Top, Right, Bottom, Left margin */
	padding: 0;
    flex-shrink: 0; /* Prevent title from shrinking if item height is constrained */
	line-height: 1.3;
    /* Font size, color, weight are applied via inline styles */
    /* Default fallbacks */
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

/* Load More Trigger / Infinite Scroll Area */
.pcc-load-more-trigger {
	text-align: center;
	padding: 20px 0;
    height: 50px; /* Give it some space */
    clear: both; /* Ensure it's below floated elements if any */
}

/* Loading Indicator (Spinner/Text) */
.pcc-loading-indicator,
.pcc-no-more-indicator,
.pcc-error-indicator {
	display: inline-block;
	padding: 8px 15px;
	border-radius: 4px;
	font-size: 1em;
	color: #ffffff;
}
.pcc-error-indicator {
    background-color: #ffecec;
    color: #c00;
}

/* Message shown when no categories match criteria */
.pcc-no-categories {
	padding: 20px;
	text-align: center;
	color: #777;
	border: 1px dashed #ccc;
    grid-column: 1 / -1; /* Span full grid width */
}