/* Comment Section Responsive Fixes */

/* Base Styles */
.comments-section {
    padding: 4rem 1rem;
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* Form Responsiveness */
#commentFormContainer {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

#commentForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#commentForm input,
#commentForm textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 8px;
    margin: 0;
}

#commentForm textarea {
    min-height: 120px;
    resize: vertical;
}

/* Rating Container */
#ratingContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
}

@media (min-width: 768px) {
    #ratingContainer {
        flex-direction: row;
        justify-content: center;
    }
}



/* Comment Grid */
.comment-grid {
    display: grid;
    gap: 20px;
    padding: 20px 15px;
    max-width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Comment Card */
.testimonial-card {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    margin: 0;
}

.comment-header {
    flex-wrap: wrap;
    gap: 8px;
}

.comment-actions {
    flex-wrap: wrap;
    gap: 8px;
}

/* Sort Controls */
.comment-controls {
    padding: 0 15px;
    margin: 20px auto;
    max-width: 700px;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 10px;
}

#sortComments {
    min-width: 120px;
    padding: 8px;
    border-radius: 6px;
}

/* Mobile Optimizations */
@media screen and (max-width: 480px) {
    .comments-section {
        padding: 2rem 10px;
    }

    .comment-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .timestamp {
        margin-left: 0;
        width: 100%;
        text-align: left;
    }

    .comment-actions {
        justify-content: flex-start;
    }

    .comment-actions span {
        padding: 8px 12px;
        font-size: 14px;
    }

    .star-rating {
        width: 100%;
        justify-content: center;
    }

    .star {
        font-size: 24px; /* Larger touch targets */
    }

    #commentForm button {
        width: 100%;
        padding: 12px;
        font-size: 16px;
    }
}

/* Reply Section */
.replies-container {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 2px solid #333;
}

@media screen and (min-width: 481px) {
    .replies-container {
        margin-left: 30px;
        padding-left: 20px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) {
    .star-rating .star,
    .comment-actions span {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .comment-actions {
        margin-top: 15px;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .testimonial-card {
        border-width: 1px;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .testimonial-card {
        background: rgba(12, 12, 12, 0.95);
    }

    input, textarea, #sortComments {
        background: #161616;
        color: #fff;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .testimonial-card,
    .star-rating .star,
    .comment-actions span {
        transition: none;
    }
}

/* Landscape Mode */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .comments-section {
        padding: 1rem;
    }

    #commentForm {
        gap: 10px;
    }

    #commentForm textarea {
        min-height: 80px;
    }
}

/* Safe Area Insets */
@supports (padding: max(0px)) {
    .comments-section {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Fix iOS Input Zoom */
@supports (-webkit-touch-callout: none) {
    input, textarea, select {
        font-size: 16px !important;
    }
}