/* ============================================================
   Tapestry product-page review tooltip
   ============================================================

   Custom properties (override in your child theme's :root to theme per site):

   --rt-star-color         Star icon colour
   --rt-star-empty-color   Empty star fill colour
   --rt-star-size          Star icon size (trigger)
   --rt-star-size-large    Star icon size (popup header)
   --rt-count-color        Review count text colour
   --rt-count-font-size    Review count font size
   --rt-popup-width        Popup width
   --rt-popup-max-width    Popup max width
   --rt-popup-bg           Popup background colour
   --rt-popup-border       Popup border colour
   --rt-popup-radius       Popup border radius
   --rt-popup-shadow       Popup box shadow
   --rt-average-color      Large average number colour
   --rt-average-font-size  Large average number font size
   --rt-meta-color         "out of 5" and total count colour
   --rt-bar-track-color    Empty bar background colour
   --rt-bar-fill-color     Filled bar colour
   --rt-bar-label-color    Bar row label/percentage colour
   --rt-see-all-color      "See All" link colour
   --rt-see-all-hover      "See All" link hover colour
   --rt-caret-offset       Horizontal offset of the popup caret from the left edge
   ============================================================ */

:root {
    --rt-star-color:        #fe5000;
    --rt-star-empty-color:  #ddd;
    --rt-star-size:         18px;
    --rt-star-size-large:   22px;
    --rt-count-color:       #000338;
    --rt-count-font-size:   13px;
    --rt-popup-width:       100%;
    --rt-popup-max-width:   450px;
    --rt-popup-bg:          #fff;
    --rt-popup-border:      #ddd;
    --rt-popup-radius:      8px;
    --rt-popup-shadow:      0 6px 20px rgba(0, 0, 0, 0.12);
    --rt-average-color:     #000338;
    --rt-average-font-size: 2.75rem;
    --rt-meta-color:        #000338;
    --rt-bar-track-color:   #ebebeb;
    --rt-bar-fill-color:    #000338;
    --rt-bar-label-color:   #000338;
    --rt-see-all-color:     #000338;
    --rt-see-all-hover:     #4d5086;
    --rt-margin-top:        0.5rem;
    --rt-caret-offset:      20px;
    --rt-out-of-font-size:  1rem;
    --rt-popup-total-font-size: 0.8125rem;
    --rt-bar-label-width:  52px;
    --rt-scroll-margin:    0px; /* set to sticky-header height per site */
}

#ProductReviews {
    scroll-margin-top: var(--rt-scroll-margin);
}

/* ---- Wrapper ---- */

.tapestry-review-tooltip {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
    margin-top: var(--rt-margin-top);
}

/* ---- Trigger (always visible) ---- */

.rt-trigger {
    display: flex;
    align-items: center;    
    gap: 0.5rem;
    cursor: default;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    color: inherit;
    text-decoration: none;
}

a.rt-trigger {
    cursor: pointer;
}

.tapestry-review-tooltip:has(.rt-popup) .rt-trigger {
    cursor: pointer;
}

.tapestry-review-tooltip:has(.rt-popup) .rt-trigger::after {
    content: '';
    display: block;
    align-self: center;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.tapestry-review-tooltip:hover .rt-trigger::after,
.tapestry-review-tooltip:focus-within .rt-trigger::after {
    transform: translateY(2px) rotate(-135deg);
}

.rt-stars {
    display: inline-flex;
    color: var(--rt-star-color);
}

.rt-star {
    display: block;
    width: var(--rt-star-size);
    height: var(--rt-star-size);
    flex-shrink: 0;
}

.rt-count {
    font-size: var(--rt-count-font-size);
    color: var(--rt-count-color);
    white-space: nowrap;
}

/* ---- Hover popup ---- */

.rt-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    width: var(--rt-popup-width);
    max-width: min(var(--rt-popup-max-width), 100%);
    box-sizing: border-box;
    padding: 1.25rem 1.25rem 0.875rem;
    background: var(--rt-popup-bg);
    border: 1px solid var(--rt-popup-border);
    border-radius: var(--rt-popup-radius);
    box-shadow: var(--rt-popup-shadow);
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.tapestry-review-tooltip:hover .rt-popup,
.tapestry-review-tooltip:focus-within .rt-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.tapestry-review-tooltip.rt-dismissed .rt-popup {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

.tapestry-review-tooltip.rt-dismissed .rt-trigger::after {
    transform: translateY(-2px) rotate(45deg) !important;
}

/* ---- Popup header ---- */

.rt-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.125rem;
}

.rt-popup-left {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 5px;
}

.rt-average {
    font-size: var(--rt-average-font-size);
    font-weight: 700;
    line-height: 1;
    color: var(--rt-average-color);
}

.rt-out-of {
    font-size: var(--rt-out-of-font-size);
    color: var(--rt-meta-color);
    margin-top: 0.125rem;
}

.rt-popup-right {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.25rem;
}

.rt-stars--large .rt-star {
    width: var(--rt-star-size-large);
    height: var(--rt-star-size-large);
}

.rt-popup-total {
    font-size: var(--rt-popup-total-font-size);
    color: var(--rt-meta-color);
    text-align: right;
}

/* ---- Star bars ---- */

.rt-bars {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.75rem 0 0.875rem;
}

.rt-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--rt-bar-label-color);
}

.rt-bar-label {
    width: var(--rt-bar-label-width);
    flex-shrink: 0;
    text-align: right;
}

.rt-bar-track {
    flex: 1;
    height: 8px;
    background: var(--rt-bar-track-color);
    border-radius: 4px;
    overflow: hidden;
}

.rt-bar-fill {
    height: 100%;
    background: var(--rt-bar-fill-color);
    border-radius: 4px;
}

.rt-bar-pct {
    width: 30px;
    flex-shrink: 0;
    text-align: right;
}

/* ---- Close button (mobile tap-to-dismiss) ---- */

.rt-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: none;
    width: 28px;
    height: 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--rt-bar-label-color);
    line-height: 1;
}

.rt-close svg {
    width: 12px;
    height: 12px;
    display: block;
}

@media (hover: none) {
    .rt-close {
        display: flex;
    }
}

/* ---- Footer link ---- */

.rt-see-all {
    display: block;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--rt-see-all-color);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.rt-see-all:hover {
    color: var(--rt-see-all-hover);
}

/* ---- Popup caret ---- */

.rt-popup::before {
    content: '';
    position: absolute;
    top: -7px;
    left: var(--rt-caret-offset);
    width: 12px;
    height: 12px;
    background: var(--rt-popup-bg);
    border-top: 1px solid var(--rt-popup-border);
    border-left: 1px solid var(--rt-popup-border);
    transform: rotate(45deg);
    z-index: -1;
}

/* various styles */

.mini-comparison-table .rt-trigger {
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    text-decoration: none;

}

.mini-comparison-table .rt-trigger .rt-star {
    width: 12px;
    height: 12px;
}

.mini-comparison-table .rt-trigger .rt-count {
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .mini-comparison-table .rt-trigger .rt-count {
        font-size: 10px;
        white-space: wrap;
    }
}