/* Core Layout Wrapper */
.reviews-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 40px;
    font-family: system-ui, -apple-system, sans-serif;
    /* background-color: #8c8c8c; */
}

/* Scroll Container */
.reviews-container {
    --color-dark: hsl(122, 24%, 10%);
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;

    background-color: transparent;

    /* CSS Scroll Snapping */
    scroll-snap-type: x mandatory;
    padding: 24px 5px;

    /* Hide scrollbars for a cleaner look */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

    width: calc(100% - 16px);
}

.reviews-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.reviews-summary {
    /* background-color: #99c3ff; */
    margin-top: -1.5rem;
    font-size: 1.25rem;
}

.reviews-info {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

/* Individual Review Cards */
.review-card {
    --color-light: hsl(120, 54%, 92%);
    display: grid;
    flex: 0 0 calc(99.999% - 16px);
    /* 1 cards visible on desktop */
    min-width: 280px;
    /* Ensures responsiveness on smaller screens */
    background: var(--color-light);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
    scroll-snap-align: start;
    /* Snaps cards into place */
    box-sizing: border-box;
}

/* Style for the card when it is the active target */
.review-card:target {
    background-color: #fdfd96;
    /* Light yellow */
    border: 2px solid #ffd700;
    transition: background-color 0.4s ease;
    /* Optional: smooth fade */
}

.review-header {
    display: block;
    background-color: transparent;
    text-align: center;
}

/* Card Content Typography */
.review-stars,
.reviews-rating-stars {
    /* display: inline-flex;
        align-content: center;
        color: #ffb100;
        font-size: 1.2rem;
        margin-block: 0; */

    --star-size: 24px;
    --star-color: #ccc;
    --star-background: #ffb100;
    /* Google yellow */

    display: inline-block;
    font-size: var(--star-size);
    font-family: Times;
    /* Standard star character support */
    line-height: 1;
}

.reviews-rating-stars {
    font-size: 1.5rem;
}

.review-stars::before,
.reviews-rating-stars::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--star-background) calc(var(--rating) / 5 * 100%), var(--star-color) calc(var(--rating) / 5 * 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.review-text {
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    /* Limit to exactly 5 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Adds the "..." automatically */
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
}

.review-img {
    display: inline-flex;
    background-color: transparent;
    aspect-ratio: 1;
    width: fit-content;
    padding: 0;
    margin-inline: auto;
    border-radius: 100%;

}

.review-author {
    margin: 0 0 4px 0;
    color: #1a1a1a;
    font-size: 1rem;
}

.review-button {
    --color-dark: hsl(122, 24%, 10%);
    display: block;
    background-color: var(--color-dark);
    color: #cccccc;
    padding: 8px 16px;
    margin-left: auto;
    margin-right: 0;
    margin-top: auto;
    margin-bottom: 0;
    width: fit-content;
    border-radius: 100vh;
    cursor: pointer;
    user-select: none;
}

.reviews-link {
    display: inline-flex;
    padding: 8px 16px;
    margin-inline: auto;
    text-decoration: none;
    width: fit-content;
    text-wrap: no-wrap;
    color: #99c3ff;
    background-color: #22242a;
    border-radius: 100vh;
}

a.reviews-link-e {
    display: inline-flex;
    background-color: #1a1a1a;
    color: #cccccc;
    text-decoration: none;
    user-select: none;
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
    margin-top: auto;
    margin-bottom: 0;
    padding: 8px 16px;
    border-radius: 100vh;
    font-size: 13.33px;
}

.author-title {
    color: #8c8c8c;
    font-size: 0.85rem;
}

.relative-time {
    --color-dark: hsl(122, 24%, 10%);
    margin-block: 0;
    font-weight: 300;
    color: var(--color-dark);
}

/* Navigation Buttons */
.reviews-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 0.5rem;
    /* width: 44px; */
    /* height: 44px; */
    aspect-ratio: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    z-index: 10;
}

.reviews-nav-btn:hover {
    background: #f5f5f5;
    transform: translateY(-50%) scale(1.05);
}

/* Styling for disabled navigation buttons */
.reviews-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    /* Prevents hover effects and clicks */
    border-color: #e0e0e0;
}

.reviews-prev-btn {
    left: 0;
}

.reviews-next-btn {
    right: 0;
}

.google-g {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    width: 24px;
    aspect-ratio: 1;
    background-color: #efefef;
    border-radius: 100vh;
    border: #e0e0e0 solid 1px;
}

svg {
    width: 16px;
    height: 16px;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
    .review-card {
        flex: 0 0 calc(50% - 12px);
        /* 2 cards on tablets */
    }
}

@media (max-width: 600px) {
    .review-card-x {
        flex: 0 0 calc(50% - 16px);
        /* 1 card on mobile */
    }

    .reviews-nav-btn {
        display: none;
    }

    /* Rely on touch swiping for mobile */
    .reviews-wrapper {
        padding: 0 20px;
    }

}

.slide_reviews_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 8px 16px;
    border-radius: 16px;
    backdrop-filter: blur(5px);
    text-align: center;
    /* filter: blur(5px); */
}

.thumb-container,
.slide_reviews {
    display: flex;
    align-items: center;
    /* Adds space on the right so the last image isn't cut off */
    padding-right: 25px;
    /* background-color: #4a4a4a; */
}

.slide_reviews {
    padding-right: 0;
    width: fit-content;
}

.thumb-container>a,
.slide_reviews>a {
    margin-left: -15px;
}

.thumb-container>a:first-child,
.slide_reviews>a:first-child {
    margin-left: 0;
}

.thumb-container img,
.slide_reviews img {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    border: 2px solid #fff;
    /* Adds a nice border to separate the stacked layers */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

    /* Pulls each image to the left by 30px to create the layering/stack effect */
    /* margin-left: -15px; */
    transition: transform 0.2s ease;
}


/* Brings the hovered thumbnail to the front */
.thumb-container img:hover {
    transform: translateY(-10px) scale(1.05);
    z-index: 10;
}

/* Ensures the very first image doesn't shift left into nothingness */
/* .thumb-container img:first-child {
        margin-left: 0;
    } */

.google-stars {
    --star-size: 24px;
    --star-color: #ccc;
    --star-background: #f7b603;
    /* Google yellow */

    display: inline-block;
    font-size: var(--star-size);
    font-family: Times;
    /* Standard star character support */
    line-height: 1;
}

.google-stars::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--star-background) calc(var(--rating) / 5 * 100%), var(--star-color) calc(var(--rating) / 5 * 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.dialog-header-review {
    --primary: #ffd700;
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--primary);
    width: 100%;
    /* height: 2rem; */
    display: inline-flex;
    padding: 4px;
    z-index: 1;
}

.dialog-title-review {
    flex: 0 1 auto;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-items: center;
    justify-content: center;
}

.dialog-close-review {
    flex: 0 0 auto;
    display: inline-flex;
    width: 32px;
    aspect-ratio: 1;
    align-items: center;
    justify-items: center;
    justify-content: center;
    background-color: red;
    line-height: 1;
    color: white;
    border-radius: 11px;
}

.btn-close-dialog-review {
    all: unset;
    cursor: pointer;
}

.dialog-body-review {
    display: grid;
    grid-auto-flow: row;
    /* flex-wrap: wrap; */
    /* max-width: min(620px, calc(99.999% - 16px)); */
}

@media (width > 62.5rem) {
    .slide_reviews_container {
        flex-direction: row;
    }

    /* Individual Review Cards */
    .review-card {
        --color-light: hsl(120, 54%, 92%);
        display: grid;
        flex: 0 0 calc(33.333% - 16px);
        /* 3 cards visible on desktop */
        min-width: 280px;
        /* Ensures responsiveness on smaller screens */
        background: var(--color-light);
        border-radius: 12px;
        padding: 28px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid #eaeaea;
        scroll-snap-align: start;
        /* Snaps cards into place */
        box-sizing: border-box;
    }

    .dialog-body-review {
        display: grid;
        grid-auto-flow: column;
        /* flex-wrap: wrap; */
        /* max-width: min(620px, calc(99.999% - 16px)); */
    }
}

.dialog-footer-review {
    --primary: #ffd700;
    position: relative;

    background-color: var(--primary);
    width: 100%;
    /* height: 2rem; */
    display: inline-flex;
    justify-content: right;
}

.dialog-status-review {
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    background-color: transparent;
    font-weight: 300;
    font-size: 0.75rem;
}

.review-profile {

    padding: 8px 16px;
    background-color: #fafab6;
    text-align: center;
}

.review-body {

    position: relative;
    font-style: italic;
    line-height: 1.6;
    background-color: transparent;
    padding: 32px 16px;
}

.review-body::before {
    content: "\201C";
    /* Unicode for left double quote */
    position: absolute;
    top: -24px;
    left: 0px;
    font-size: 5rem;
    color: #797979;
    /* Light gray for a decorative look */
    font-family: Georgia, serif;
    z-index: 0;
}