/**
 * Independent and responsive styles for the [hls_video_display] shortcode.
 * FINAL VERSION: Adds styles for the "Read More" description feature.
 *
 * @since 1.3.1
 */

/* --- Main Wrapper --- */
.shvh-display-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #2c3e50; /* A darker, more professional text color */
    margin: 15px 0; /* Reduced margin */
}

/* --- Title --- */
.shvh-display-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px 0; /* Reduced margin */
    padding: 0;
    line-height: 1.2;
}

/* --- Info Bar (Flexbox Layout) --- */
.shvh-display-info-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* Pushes stats left, buttons right */
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 15px;
}

.shvh-info-bar-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px; /* Vertical and horizontal gap */
    font-size: 16px; /* Increased font size */
    color: #34495e;
    font-weight: 500;
}

.shvh-info-bar-stats .shvh-icon {
    font-style: normal;
    margin-right: 6px;
    font-size: 18px; /* Bigger icons */
    vertical-align: middle;
}
.shvh-icon.shvh-icon-heart {
    color: #e74c3c; /* Red heart */
}

/* Like Button Styling */
.shvh-display-likes .shvh-like-button {
    text-decoration: none;
    color: #e74c3c;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.shvh-display-likes .shvh-like-button:hover {
    transform: scale(1.1);
}
.shvh-display-likes .shvh-like-button.liked {
    transform: scale(1);
}
.shvh-display-likes .shvh-like-button.liked .shvh-icon-heart {
    animation: shvh-heart-pop 0.4s ease;
}

@keyframes shvh-heart-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Star Rating in Info Bar */
.shvh-star-rating .shvh-star-filled { color: #f39c12; }
.shvh-star-rating .shvh-star-empty { color: #bdc3c7; }
.shvh-review-count { margin-left: 6px; font-size: 14px; color: #7f8c8d; }

/* --- Action Buttons --- */
.shvh-info-bar-actions {
    display: flex;
    gap: 12px;
}
.shvh-action-button {
    display: inline-block;
    padding: 8px 18px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    text-align: center;
    background: linear-gradient(45deg, #e74c3c, #c0392b); /* Impactful red gradient */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}
.shvh-action-button:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

/* --- Description --- */
.shvh-display-description {
    font-size: 16px;
    line-height: 1.7;
    position: relative; /* Needed for the fade-out effect */
    transition: max-height 0.4s ease-in-out;
}
.shvh-display-description p:first-child { margin-top: 0; }
.shvh-display-description p:last-child { margin-bottom: 0; }

/* Collapsed state for the description */
.shvh-display-description.collapsed {
    max-height: 110px; /* This should match the JS threshold */
    overflow: hidden;
    margin-bottom: 0; /* Remove margin when collapsed */
}

/* Fade-out effect for collapsed description */
.shvh-display-description.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    /* Assumes a white/light page background. Change the color if your site background is dark. */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

/* "Read More" link styling */
.shvh-read-more-link {
    display: block;
    width: 100%;
    padding-top: 8px;
    font-weight: 600;
    color: #c0392b; /* Using the red from the button styles */
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 15px; /* Re-apply margin here */
}
.shvh-read-more-link:hover {
    text-decoration: underline;
}

/* --- Reviews Section --- */
.shvh-display-reviews-section { margin-top: 20px; border-top: 1px solid #e2e8f0; padding-top: 20px; }
.shvh-reviews-title { font-size: 22px; font-weight: 600; margin: 0 0 15px 0; }
.shvh-review-item { background: #f8f9fa; border: 1px solid #e9ecef; border-left: 4px solid #e74c3c; border-radius: 4px; padding: 15px; margin-bottom: 15px; }
.shvh-review-item:last-child { margin-bottom: 0; }
.shvh-review-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.shvh-review-author { font-weight: bold; color: #2c3e50; }
.shvh-review-item-stars { color: #f39c12; }
.shvh-review-text p { margin: 0; font-size: 15px; color: #34495e; }

/* --- Pagination --- */
.shvh-reviews-pagination { margin-top: 25px; text-align: center; }
.shvh-reviews-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 2px; border: 1px solid #ddd; background: #fff; text-decoration: none; color: #555; border-radius: 4px; }
.shvh-reviews-pagination .page-numbers:hover { background: #f5f5f5; border-color: #ccc; }
.shvh-reviews-pagination .page-numbers.current { background: #c0392b; color: #fff; border-color: #c0392b; }

/* --- Mobile Responsiveness --- */
@media (max-width: 767px) {
    .shvh-display-info-bar {
        justify-content: center; /* Center items on mobile */
    }
    .shvh-info-bar-actions {
        width: 100%; /* Make button container full width */
        justify-content: center; /* Center the buttons within the container */
    }
    .shvh-action-button {
        flex-grow: 1; /* Allow buttons to grow and fill space */
        text-align: center;
    }
}