/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/*
 ========================================================================================================
 Form Container
 ========================================================================================================
 */
.pcr-form-container {
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    padding: 0 0 1rem;
    margin: 0 0 1rem;
}

/*
========================================================================================================
Form Styles
========================================================================================================
*/
.pcr-review-form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
}

.pcr-review-form legend {
    padding: 0;
    margin: 0 0 0.5rem;
    border: 0;
}

.pcr-required-field::after {
    content: "*";
    color: #c84554;
    font-weight: bold;
    margin-left: 0.5rem;
}

/*
========================================================================================================
Form Notifications
========================================================================================================
*/
.pcr-error-message,
.pcr-success-message {
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-left: 6px solid #dc3545;
    margin: 1rem 0;
    padding: 1rem;
}

.pcr-error-message *:last-child,
.pcr-success-message *:last-child {
    margin-bottom: 0;
}

.pcr-error-message {
    border-left-color: #dc3545;
}

.pcr-success-message {
    border-left-color: #28a745;
}

/*
========================================================================================================
All Stars
========================================================================================================
*/
.pcr-star-icon {
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
}

/*
========================================================================================================
Star Rating Styles
========================================================================================================
*/

.pcr-star-rating {
    width: min-content;
    padding: 0.3rem;
}

.pcr-star-rating>div {
    position: relative;
    height: var(--pcr-star-rating-size);
    width: calc(var(--pcr-star-rating-size) * var(--pcr-max-stars));
    background-image: var(--pcr-unchecked-image); 
    background-size: var(--pcr-star-rating-size) var(--pcr-star-rating-size);
}

.pcr-star-rating label {
    position: absolute;
    height: 100%;
    background-size: var(--pcr-star-rating-size) var(--pcr-star-rating-size);
}

.pcr-star-rating label:nth-of-type(1) {
    z-index: 5;
    width: calc(100% / var(--pcr-max-stars) * 1);
}

.pcr-star-rating label:nth-of-type(2) {
    z-index: 4;
    width: calc(100% / var(--pcr-max-stars) * 2);
}

.pcr-star-rating label:nth-of-type(3) {
    z-index: 3;
    width: calc(100% / var(--pcr-max-stars) * 3);
}

.pcr-star-rating label:nth-of-type(4) {
    z-index: 2;
    width: calc(100% / var(--pcr-max-stars) * 4);
}

.pcr-star-rating label:nth-of-type(5) {
    z-index: 1;
    width: calc(100% / var(--pcr-max-stars) * 5);
}

.pcr-star-rating input:checked + label,
.pcr-star-rating input:focus + label{
    background-image: var(--pcr-checked-image); 
}
.pcr-star-rating input:checked + label:hover,
.pcr-star-rating label:hover{
    background-image: var(--pcr-hovered-image); 
}
            
.pcr-star-rating>div:focus-within{
    outline: 1px dotted #666;
}

.pcr-star-rating input,
.pcr-star-rating label>span{
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

/*
========================================================================================================
Average Reviews
========================================================================================================
*/
.pcr-avg {
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    margin: 0 0 1rem;
}

.pcr-average-stars {
    position: relative;
}

.pcr-average-star-gradient {
    position: absolute;
}

.pcr-average-meta {
    font-style: italic;
}

/*
========================================================================================================
Review Items
========================================================================================================
*/
.pcr-review-item {
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    margin: 0 0 1rem;
}

.pcr-review-item-meta {
    font-style: italic;
    margin: 0 0 0.5rem;
}

.pcr-review-item-content {
    margin: 0 0 1rem;
}

/*
========================================================================================================
Review Pagination
========================================================================================================
*/
.pcr-pagination {
    margin: 1rem 0;
}

.pcr-pagination-label {
    margin: 0 0 0.5rem;
}

.pcr-pagination-links {
    display: inline-block;
    border-left: 1px solid rgba(128, 128, 128, 0.5);
}

.pcr-pagination-links a.pcr-pagination-link {
    display: inline-block;
    line-height: 1;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid rgba(128, 128, 128, 0.5);
    border-left: 0;
}

.pcr-pagination-links a.pcr-pagination-link.pcr-pagination-link-disabled {
    display: none;
}

/*
========================================================================================================
  Slider
========================================================================================================
*/
.pcr-review-slider-wrapper {
    position: relative;
    width: 100%;
}

.pcr-review-slider-container {
    padding: 0 35px 60px 35px;
}

.pcr-review-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.pcr-review-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(100%);
    animation-duration: 1s;
    animation-fill-mode: both;
}

.pcr-current-slide {
    transform: translateX(0);
    display: flex;
    align-items: center;
    height: 100%;
}

.pcr-previous-slide {
    transform: translateX(0);
    display: flex;
    align-items: center;
    height: 100%;
}

/*
========================================================================================================
  Slide Content
========================================================================================================
*/
.pcr-review-slide-container {
    margin: 5px auto;
    text-align: center;
}

.pcr-review-slide-meta {
    font-style: italic;
    margin: 0.5rem 0 0.5rem;
}

.pcr-review-slide-content {
    margin: 0 0 1rem;
}

/*
========================================================================================================
  Controls
========================================================================================================
*/
.pcr-slide-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 24px;
}

.pcr-previous-slide-control,
.pcr-next-slide-control {
    position: absolute;
    cursor: pointer;
}

.pcr-previous-slide-control {
    left: 5px;
}

.pcr-next-slide-control {
    right: 5px;
}

.pcr-state-controls {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 24px;
}

.pcr-pause-slider-control,
.pcr-play-slider-control {
    position: absolute;
    cursor: pointer;
    left: 50%;
}

.pcr-play-slider-control {
    transform: translateX(-25px);
}

.pcr-pause-slider-control {
    transform: translateX(1px);
}

.pcr-play-slider-control svg,
.pcr-pause-slider-control svg {
    fill: #888;
}

.pcr-play-slider-control:hover svg,
.pcr-pause-slider-control:hover svg {
    fill: #555;
}

.pcr-play-slider-control.pcr-selected-state svg,
.pcr-pause-slider-control.pcr-selected-state svg {
    fill: #000;
}

.pcr-controls-on-hover .pcr-slide-controls {
    display: none;
}

@media (min-width:768px) {
    .pcr-controls-on-hover .pcr-state-controls {
        display: none;
    }

    .pcr-review-slider-wrapper.pcr-controls-on-hover:hover .pcr-slide-controls,
    .pcr-review-slider-wrapper.pcr-controls-on-hover:hover .pcr-state-controls {
        display: block;
    }
}

.pcr-pager-wrapper {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.pcr-pager-item {
    display: inline-block;
    cursor: pointer;
    background: #666;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    outline: 0;
    border-radius: 50%;
    line-height: 1;
}

.pcr-pager-item:hover, .pcr-pager-item.pcr-selected-pager {
    background: #000;
}

/*
========================================================================================================
  Accessibility
========================================================================================================
*/

.pcr-sr-only,
.pcr-sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
========================================================================================================
  Animations
========================================================================================================
*/
@keyframes pcr-fade-in-left {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    50% {
        opacity: .25;
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.pcr-fade-in-left {
    animation-name: pcr-fade-in-left;
}

@keyframes pcr-fade-in-right {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    50% {
        opacity: .25;
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.pcr-fade-in-right {
    animation-name: pcr-fade-in-right;
}

@keyframes pcr-fade-out-left {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

.pcr-fade-out-left {
    animation-name: pcr-fade-out-left;
}

@keyframes pcr-fade-out-right {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

.pcr-fade-out-right {
    animation-name: pcr-fade-out-right;
}