.testimonials_list_section {
    /* Section specific styles */
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 25px; /* Space between cards */
    padding: 10px 0;
}

.testimonial-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
}

.testimonial-image {
    width: 100%;
    height: 200px; /* Fixed height for images */
    object-fit: cover; /* Cover the area without distortion */
    border-bottom: 1px solid #eee;
}

.testimonial-image-placeholder {
    width: 100%;
    height: 200px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    font-size: 0.9em;
    border-bottom: 1px solid #eee;
}

.testimonial-content {
    padding: 20px;
    flex-grow: 1; /* Allow content to fill space */
    display: flex;
    flex-direction: column;
}

.testimonial-title {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.testimonial-title a {
    text-decoration: none;
    color: #333;
}

.testimonial-title a:hover {
    color: #007bff;
}

.testimonial-rating {
    margin-bottom: 15px;
    color: #f8b400; /* Star color */
    font-size: 0.95em;
}

.testimonial-rating .rating-value {
    color: #666;
    font-size: 0.9em;
    margin-left: 5px;
}

.testimonial-excerpt {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Push author and button down */
}

.testimonial-author {
    font-size: 0.9em;
    color: #777;
    text-align: right;
    margin-bottom: 15px;
    font-style: italic;
}

.testimonial-content .btn-sm {
    align-self: flex-end; /* Align button to the right */
    padding: 6px 12px;
    font-size: 0.85em;
}

/* Styles for the 'no data' message within the grid */
.testimonials-grid .no-data {
    grid-column: 1 / -1; /* Span across all columns */
    text-align: center;
    padding: 50px 20px;
    color: #777;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}


/* Testimonial Create Form Rating Styles */
.rating-group .rating-stars {
    display: inline-flex; /* Align stars horizontally */
    flex-direction: row-reverse; /* Reverse order to make selection work left-to-right */
    justify-content: flex-end; /* Align to the end (right) */
    vertical-align: middle; /* Align stars vertically with label */
}

.rating-group input[type="radio"] {
    display: none; /* Hide the actual radio button */
}

/* Target ONLY the star labels */
.rating-group .rating-stars label {
    font-size: 2em; /* Adjust star size */
    color: #ddd; /* Default empty star color */
    cursor: pointer;
    padding: 0 0.1em; /* Spacing between stars */
    transition: color 0.2s ease;
}

/* Style ONLY star labels when hovered or selected */
.rating-group .rating-stars input[type="radio"]:checked ~ label,
.rating-group .rating-stars label:hover,
.rating-group .rating-stars label:hover ~ label {
    color: #f8b400; /* Filled star color (same as list view) */
}

/* Style for the main label ("별점:") */
.rating-group > label:first-of-type {
    margin-right: 10px; /* Add some space between label and stars */
    vertical-align: middle; /* Align label vertically with stars */
    display: inline-block; /* Needed for vertical-align */
    line-height: 2em; /* Match star height */
    font-size: 1.5em; /* Increase font size */
    /* Ensure default color is used, remove any inherited color if needed */
    /* color: initial; */ 
}

/* Testimonial Create Form - Input with Unit */
.input-group-unit {
    display: flex;
    align-items: center;
}

.input-group-unit input[type="number"] {
    height: 2em;
    margin-right: 8px; /* Space between input and unit */
    /* Adjust width if needed, or remove default width from general input styles */
     width: auto; 
}

.input-group-unit .input-unit {
    white-space: nowrap; /* Prevent unit text from wrapping */
    color: #555;
}

/* Combined Price Input Group */
.price-group-combined {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 15px; /* Space between the two price inputs */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.price-group-combined .input-group-unit {
   flex-basis: calc(50% - 8px); /* Try to fit two on one line, accounting for gap */
   /* If you want them to have potentially different widths, remove flex-basis 
      and rely on flex-grow on the input inside .input-group-unit */
}

/* Ensure the required text is visible */
.price-group-combined .input-unit {
    /* Existing styles from .input-group-unit .input-unit apply */
    /* You might want to adjust font-size or weight */
    font-size: 0.9em; 
}

/* Adjust input width within the combined group if needed */
.price-group-combined .input-group-unit input[type="number"] {
     /* Remove flex-grow to prevent stretching */
     /* flex-grow: 1; */ 
     width: 3em; /* Set a fixed width, adjust as needed */
     max-width: 100%; /* Ensure it doesn't overflow container */
}

/* Responsive adjustments for combined price group */
@media (max-width: 500px) { 
    .price-group-combined .input-group-unit {
        flex-basis: 100%; /* Stack them on smaller screens */
    }
     .price-group-combined {
        gap: 10px; 
    }
}

/* Apply consistent star styles to view page meta section */
.testimonial-meta .rating {
    /* Keep font-size for consistency if needed, remove color */
    font-size: 0.95em; /* Match list view font-size */
}
.testimonial-meta .rating i { /* Target only the star icons */
    color: #f8b400; /* Match list view star color */
} 

.pagination-container {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .sub_section{
        padding: calc(var(--spacing-unit) * 1);
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr); /* Single column on small screens */
        gap: calc(var(--spacing-unit) * 1);
    }
}