/**
 * 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-rating-stars {
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 40px;
}

.pcr-rating-stars label {
    float: right;
    display: inline-block;
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    width: auto !important;
}

.pcr-rating-stars input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}

.pcr-rating-star-0 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*
========================================================================================================
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;
}