/* assets/css/theme.css - ADD THESE STYLES */

/* --- Shop Page Styles --- */
.shop-container {
    /* .page-container already provides padding and max-width,
       so this class might only be needed for very specific shop layout adjustments
       if .page-container is not sufficient.
       For now, we assume .page-container handles the main layout. */
}

.shop-header {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-medium-gray);
}

.shop-header h1 {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--theme-dark-gray);
    margin-bottom: 0.5rem; /* Add margin for when it wraps */
}

.shop-controls {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between multiple controls if added later */
}

.shop-controls .form-select, /* Using Bootstrap's class for consistency */
.shop-controls .select-input { /* Keep your class if you prefer custom styling */
    background-color: var(--theme-white);
    border: 1px solid var(--theme-medium-gray);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--theme-dark-gray);
    min-width: 220px; /* Adjust as needed */
    box-shadow: none; /* Remove default Bootstrap shadow if any */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.shop-controls .form-select:focus,
.shop-controls .select-input:focus {
    outline: none;
    border-color: var(--theme-dark-yellow);
    box-shadow: 0 0 0 0.2rem rgba(var(--theme-dark-yellow-rgb), 0.25); /* Use RGB for box-shadow */
}

/* Alerts - Themed for shop page (can be global in theme.css if preferred) */
.alert-shop { /* Using a more specific class to avoid conflict if .alert is heavily customized by Bootstrap */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}

.alert-shop-error {
    background-color: #FFF3CD; /* Lighter yellow for error background */
    color: #664d03; /* Darker text for contrast */
    border-color: var(--theme-dark-yellow-hover);
}
.alert-shop-error i {
    color: #664d03; /* Or var(--theme-dark-yellow-hover) */
}

.alert-shop-success {
    background-color: #E6FFFA; /* Light cyan/greenish for success */
    color: #004030; /* Dark green text */
    border-color: #50cdac; /* A matching green */
}
.alert-shop-success i {
    color: #007552;
}

/* Item Grid */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive grid */
    gap: 1.75rem; /* Increased gap */
}

.item-card {
    background-color: var(--theme-white);
    border: 1px solid var(--theme-medium-gray);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    display: flex;
    flex-direction: column; /* Ensure footer items align correctly */
}

.item-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
    transform: translateY(-5px);
    border-color: var(--theme-dark-yellow); /* Highlight border on hover */
}

.item-card .item-image {
    width: 100%;
    height: 220px; /* Fixed height for uniform look */
    overflow: hidden; /* Ensure image doesn't break layout */
    background-color: var(--theme-light-gray); /* Background for image area */
}

.item-card .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover ensures image fills space, might crop */
    display: block;
    transition: transform 0.3s ease;
}
.item-card:hover .item-image img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.item-card .image-placeholder {
    width: 100%;
    height: 220px;
    background-color: var(--theme-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-card .image-placeholder i {
    font-size: 3rem; /* Larger placeholder icon */
    color: var(--theme-dark-yellow); /* Themed icon color */
}

.item-card .item-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow content to grow */
}

.item-card .item-content h3 {
    font-size: 1.3rem; /* Slightly larger product name */
    font-weight: 600;
    color: var(--theme-dark-gray);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.item-card .category {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-card .price {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--theme-dark-yellow); /* Price in theme color */
    margin-bottom: 0.75rem;
}

.item-card .description {
    font-size: 0.875rem;
    color: var(--theme-text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
    flex-grow: 1; /* Push form to bottom */
    min-height: 60px; /* Ensure a minimum height for description area */
}

/* Form elements within item-card */
.item-card .form-group {
    margin-bottom: 1rem;
}

.item-card .form-group label:not(.option-item) { /* Exclude checkbox/radio labels if they have .option-item */
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-dark-gray);
    margin-bottom: 0.3rem;
}

.item-card .input-field,
.item-card .form-control, /* For bootstrap consistency */
.item-card .form-select { /* For bootstrap consistency */
    width: 100%;
    background-color: var(--theme-white);
    border: 1px solid var(--theme-medium-gray);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: var(--theme-dark-gray);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.item-card .input-field:focus,
.item-card .form-control:focus,
.item-card .form-select:focus {
    outline: none;
    border-color: var(--theme-dark-yellow);
    box-shadow: 0 0 0 0.15rem rgba(var(--theme-dark-yellow-rgb), 0.2);
}
.item-card input[type="number"].input-field {
    max-width: 80px; /* Smaller width for quantity input */
}


.item-card .options-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.item-card .option-item { /* Bootstrap form-check can be used here too */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--theme-dark-gray);
    padding: 0.25rem 0;
    cursor: pointer;
}

.item-card .option-item input[type="checkbox"],
.item-card .option-item input[type="radio"] {
    margin: 0;
    accent-color: var(--theme-dark-yellow); /* Modern way to color checkboxes/radios */
    width: 1em;
    height: 1em;
}
.item-card .option-item span {
    line-height: 1;
}


.item-card .btn-primary { /* Already styled globally, but can be overridden if needed */
    width: 100%;
    margin-top: auto; /* Push button to the bottom of the card content */
    padding: 0.75rem 1rem !important; /* Slightly larger padding for card button */
}


/* Empty state for shop (uses global .empty-state if desired) */
.shop-container .empty-state { /* If you need shop-specific empty state styling */
    grid-column: 1 / -1; /* Span all columns if inside .item-grid */
    /* Uses styles from theme.css .empty-state */
}


/* Responsive adjustments for shop elements */
@media (max-width: 768px) {
    .shop-header {
        flex-direction: column;
        align-items: stretch; /* Make controls take full width */
        gap: 1rem;
    }
    .shop-header h1 {
        text-align: center; /* Center title on mobile */
    }
    .shop-controls .form-select,
    .shop-controls .select-input {
        width: 100%; /* Full width for select on mobile */
    }

    .item-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
        gap: 1.5rem;
    }
    .item-card .description {
        min-height: auto; /* Reset min-height for stacked layout */
    }
}