/**
 * We offer the best and most useful modules PrestaShop and modifications for your online store
 *
 * We are experts and professionals in PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This file is not open source! Each license that you purchased is only available for 1 website only
 * If you want to use this file on more websites (or projects), you need to purchase additional licenses
 * You are not allowed to redistribute, resell, lease, license, sub-license or offer our resources to any third party
 * Please ensure that you are using a valid license for this file.
 *
 * @author PresTeamShop SAS (Registered Trademark) <info@presteamshop.com>
 * @copyright 2011-2026 PresTeamShop SAS, All rights reserved
 * @license https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
 *
 * @category PrestaShop
 * @category Module
 */
/**
 * PTS Google Reviews - SVG Star Rating Component Styles
 * Pure SVG-based star rating system with decimal precision support
 * No external font dependencies required
 * Colors are applied via CSS custom properties (--ptsgr-carousel-star-filled-color, --ptsgr-carousel-star-empty-color)
 */

.ptsgr-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.ptsgr-star {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
}

/* Full star styling - uses CSS variable for filled color */
.ptsgr-star--full path {
    fill: var(--ptsgr-carousel-star-filled-color, #FFD700);
}

/* Partial star styling - gradient stops use CSS variables */
.ptsgr-star--partial .ptsgr-star-stop--filled {
    stop-color: var(--ptsgr-carousel-star-filled-color, #FFD700);
    stop-opacity: 1;
}

.ptsgr-star--partial .ptsgr-star-stop--empty {
    stop-color: var(--ptsgr-carousel-star-empty-color, #6c757d);
    stop-opacity: 1;
}

/* Empty star styling - uses CSS variable for empty color */
.ptsgr-star--empty path {
    fill: var(--ptsgr-carousel-star-empty-color, #6c757d);
}

/* Responsive sizing for different contexts */
.pts-google-reviews__summary-stars .ptsgr-star {
    width: 24px;
    height: 24px;
}

.pts-google-reviews__review-rating .ptsgr-star {
    width: 18px;
    height: 18px;
}

.google-reviews-content .ptsgr-star {
    width: 20px;
    height: 20px;
}

/* Carousel design 3 specific sizing */
.pts-google-reviews--carouseldesign3 .summary-data-reviews .ptsgr-star {
    width: 22px;
    height: 22px;
}

/* Modal specific sizing */
.ptsgr-google-reviews__modal .ptsgr-star {
    width: 20px;
    height: 20px;
}

/* Accessibility improvements */
.ptsgr-star-rating[role="img"] {
    vertical-align: middle;
}

/* Ensure SVG renders crisply */
.ptsgr-star svg {
    display: block;
}

/* ============================================
   Carousel Design 2 - White Stars with Colored Backgrounds
   Scoped to .pts-google-reviews--carouseldesign2 to avoid leaking to other components
   ============================================ */

/* Wrapper containers - only exist for design 2 */
.pts-google-reviews--carouseldesign2 .ptsgr-star-wrapper {
    display: inline-block;
    position: relative;
}

/* SVG stars inside wrapper are always white */
.pts-google-reviews--carouseldesign2 .ptsgr-star-wrapper .ptsgr-star path {
    fill: #ffffff !important;
}

/* Full star wrapper - solid background with configured color */
.pts-google-reviews--carouseldesign2 .ptsgr-star-wrapper--full {
    background-color: var(--ptsgr-carousel-star-filled-color, #FFD700);
}

/* Empty star wrapper - same color with opacity */
.pts-google-reviews--carouseldesign2 .ptsgr-star-wrapper--empty {
    background-color: var(--ptsgr-carousel-star-filled-color, #FFD700);
    opacity: 0.3;
}

/* Partial star wrapper - no base background, let pseudo-elements handle it */
.pts-google-reviews--carouseldesign2 .ptsgr-star-wrapper--partial {
    background: transparent;
}

/* Base layer - empty portion with opacity */
.pts-google-reviews--carouseldesign2 .ptsgr-star-wrapper--partial::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ptsgr-carousel-star-filled-color, #FFD700);
    opacity: 0.3;
    border-radius: 2px;
    z-index: 0;
}

/* Top layer - filled portion with solid color */
.pts-google-reviews--carouseldesign2 .ptsgr-star-wrapper--partial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ptsgr-star-fill-percentage, 50%);
    background-color: var(--ptsgr-carousel-star-filled-color, #FFD700);
    border-radius: 2px 0 0 2px;
    z-index: 1;
}

/* Ensure SVG is above both pseudo-elements */
.pts-google-reviews--carouseldesign2 .ptsgr-star-wrapper--partial .ptsgr-star {
    position: relative;
    z-index: 2;
}

/* ============================================
   Hook-specific positioning
   ============================================ */

/* Center modal button when rendered in HOME hook */
.ptsgr-google-reviews__modal.ptsgr-google-reviews__hook--home .google-reviews-content{
    justify-content: center;
}