/**
 * solid_reviewsreward - front office
 *
 * Every value here is taken from the theme (assets/css/custom.css):
 *   text            #222222      muted        #777777
 *   accent          #0F8104      borders      #ededed
 *   soft background #f6f6f6      stars        #ff9a52 (theme.css)
 *   error           #ff4c4c      (theme.css)
 *   radius          5px / 100%   transition   all 300ms linear
 *   type            14px body, 16px headings, 24px large numbers
 *
 * No new component is introduced: alerts, .progress, .pagination, .badge,
 * .form-control, .btn-primary and material-icons all come from the theme.
 */

.solid-rr {
    color: #222222;
    font-size: 14px;
}

.solid-rr-muted {
    color: #777777;
}

/* ---------------------------------------------------------------- stars */

.solid-rr-stars {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    color: #ff9a52;
}

.solid-rr-stars .material-icons {
    font-size: 20px;
    line-height: 1;
}

.solid-rr-stars-sm .material-icons {
    font-size: 16px;
}

/* The theme hides the reviews block in miniatures because it had no review
   source. Showing it is the only theme rule this module overrides; turning off
   "Rodyti atsiliepimus prekės kortelėje" stops the stylesheet from loading. */
.js-product-miniature .product_desc .hook-reviews {
    display: block;
}

.js-product-miniature .product_desc .hook-reviews .nb-comments {
    display: inline-block;
    color: #777777;
    font-size: 12px;
    margin-left: 4px;
}

/* -------------------------------------------------------------- summary */

.solid-rr-summary {
    padding: 0 0 25px;
    margin: 0 0 20px;
    border-bottom: 1px solid #ededed;
}

.solid-rr-score-col {
    line-height: 1.3;
}

.solid-rr-score {
    font-size: 24px;
    font-weight: 500;
    color: #222222;
}

.solid-rr-score-max {
    font-size: 14px;
    color: #777777;
    margin-right: 8px;
}

.solid-rr-score-col .solid-rr-stars,
.solid-rr-score-col .solid-rr-muted {
    display: block;
    margin-top: 4px;
}

/* Rating breakdown: the theme's Bootstrap .progress, only slimmer and in the
   theme's accent colour instead of the Bootstrap blue. */
.solid-rr-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    color: #222222;
    text-decoration: none;
    transition: all 300ms linear;
}

.solid-rr-bar-row:hover,
.solid-rr-bar-row.active {
    color: #0F8104;
}

.solid-rr-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 42px;
    font-size: 13px;
}

.solid-rr-bar-label .material-icons {
    font-size: 14px;
    color: #ff9a52;
}

/* The theme ships a Bootstrap build where .progress-bar is inline-block, so
   inside an 8px track the fill sits on the text baseline and gets clipped away.
   Forcing block-level layout keeps the theme's look and shows the fill. */
.solid-rr-bars .progress {
    display: flex;
    flex: 1;
    height: 8px;
    margin: 0;
    background-color: #f1f1f1;
    border-radius: 5px;
    overflow: hidden;
}

.solid-rr-bars .progress-bar {
    display: block;
    height: 8px;
    background-color: #0F8104;
    border-radius: 5px;
    text-indent: 0;
    transition: all 300ms linear;
}

/* A single review out of many still has to be visible. */
.solid-rr-bars .progress-bar.has-value {
    min-width: 4px;
}

.solid-rr-bar-count {
    width: 28px;
    text-align: right;
    font-size: 13px;
    color: #777777;
}

.solid-rr-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.solid-rr-cta .btn {
    align-self: flex-start;
}

/* -------------------------------------------------------------- toolbar */

.solid-rr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.solid-rr-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 12px;
    border: 1px solid #ededed;
    border-radius: 30px;
    color: #222222;
    font-size: 13px;
    background: #ffffff;
    transition: all 300ms linear;
}

.solid-rr-chip:hover {
    border-color: #222222;
    color: #222222;
}

.solid-rr-chip.active {
    background: #0F8104;
    border-color: #0F8104;
    color: #ffffff;
}

.solid-rr-chip .material-icons {
    font-size: 14px;
}

.solid-rr-toolbar-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.solid-rr-toolbar-sort .form-control {
    width: auto;
    min-width: 170px;
    height: 35px;
    padding: 0 8px;
}

/* ----------------------------------------------------------------- list */

.solid-rr-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.solid-rr-item {
    padding: 18px 0;
    border-bottom: 1px solid #ededed;
}

.solid-rr-item:first-child {
    padding-top: 0;
}

.solid-rr-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.solid-rr-avatar {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background: #f6f6f6;
    color: #777777;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
}

.solid-rr-author {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.solid-rr-item-head .solid-rr-stars {
    margin-left: auto;
}

.badge.solid-rr-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f6f6f6;
    color: #0F8104;
    font-size: 11px;
    font-weight: 400;
    padding: 3px 8px;
    border-radius: 30px;
}

.badge.solid-rr-verified .material-icons {
    font-size: 13px;
}

.solid-rr-date,
.solid-rr-variation {
    font-size: 13px;
}

.solid-rr-variation {
    margin-top: 6px;
}

.solid-rr-item-title {
    font-size: 16px;
    font-weight: 500;
    color: #222222;
    margin: 8px 0 4px;
}

.solid-rr-text {
    margin: 4px 0 0;
    line-height: 24px;
}

/* Read more: collapsed by JS only when the text is actually long, so short
   reviews are untouched. */
.solid-rr-text.is-clamped {
    max-height: 72px;
    overflow: hidden;
    position: relative;
}

.solid-rr-text.is-clamped:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
}

.solid-rr-more {
    display: inline-block;
    margin-top: 6px;
    color: #0F8104;
    font-size: 13px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: all 300ms linear;
}

.solid-rr-more:hover {
    color: #222222;
}

.solid-rr-reply {
    margin: 12px 0 0;
    padding: 12px 15px;
    background: #f6f6f6;
    border-radius: 5px;
}

.solid-rr-reply-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px;
}

.solid-rr-reply-head .material-icons {
    font-size: 16px;
    color: #0F8104;
}

.solid-rr-reply p {
    margin: 0;
    line-height: 24px;
}

.solid-rr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    font-size: 13px;
}

.solid-rr-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #777777;
    transition: all 300ms linear;
}

.solid-rr-action:hover {
    color: #0F8104;
}

.solid-rr-action.is-voted {
    color: #0F8104;
    pointer-events: none;
}

.solid-rr-action .material-icons {
    font-size: 16px;
}

.solid-rr-action-report {
    margin-left: auto;
}

.solid-rr-action-report:hover {
    color: #ff4c4c;
}

.solid-rr-pagination {
    margin: 25px 0 0;
}

.solid-rr-empty {
    padding: 10px 0 0;
}

/* ----------------------------------------------------------------- form */

.solid-rr-form-intro {
    margin-bottom: 22px;
}

/* The last form item carries a bottom border, so the button needs air. */
.solid-rr-form .btn-primary {
    margin-top: 20px;
}

.solid-rr-form-errors {
    margin: 20px 0 0;
}

.solid-rr-form-errors ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.solid-rr-error-link {
    display: inline;
    text-align: left;
    color: #222222;
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    transition: all 300ms linear;
}

.solid-rr-error-link:hover {
    color: #0F8104;
}

/* The theme styles .has-error for input and select only. */
.solid-rr-form .has-error textarea {
    outline: 1px solid #ff4c4c;
}

.solid-rr-form-item {
    padding: 20px 0;
    border-bottom: 1px solid #ededed;
}

.solid-rr-form-item:first-of-type {
    border-top: 1px solid #ededed;
}

.solid-rr-form-item-head {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
}

.solid-rr-form-item-head a {
    color: #222222;
}

/* Star input: radio buttons rendered 5..1 so the sibling selector can light up
   the chosen star. Keyboard accessible, works with JavaScript disabled. */
.solid-rr-rate {
    border: 0;
    padding: 0;
    margin: 0 0 14px;
    display: inline-block;
}

.solid-rr-rate legend {
    font-size: 14px;
    color: #777777;
    border: 0;
    margin: 0 0 4px;
    padding: 0;
    width: auto;
    line-height: 24px;
}

.solid-rr-rate input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.solid-rr-rate label {
    margin: 0;
    padding: 0 2px;
    cursor: pointer;
    color: #ededed;
    line-height: 1;
    transition: all 300ms linear;
}

.solid-rr-rate label .material-icons {
    font-size: 30px;
}

.solid-rr-rate-stars {
    display: inline-flex;
    flex-direction: row-reverse;
}

.solid-rr-rate-stars input[type="radio"]:checked ~ label {
    color: #ff9a52;
}

/* Hover preview has to beat the stored selection, so the colour is set on the
   icon: a direct match always wins over the colour inherited from the label. */
.solid-rr-rate-stars:hover label .material-icons {
    color: #ededed;
}

.solid-rr-rate-stars:hover label:hover .material-icons,
.solid-rr-rate-stars:hover label:hover ~ label .material-icons {
    color: #ff9a52;
    opacity: .75;
}

.solid-rr-rate-clear {
    margin-left: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: #777777;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    vertical-align: 6px;
    transition: all 300ms linear;
}

.solid-rr-rate-clear:hover {
    color: #222222;
}

.solid-rr-rate input[type="radio"]:focus + label {
    outline: 1px dotted #222222;
    outline-offset: 2px;
}

.solid-rr-counter {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #777777;
}

.solid-rr-counter.is-short {
    color: #ff4c4c;
}

/* Honeypot: out of sight for people, still filled in by naive bots. */
.solid-rr-hp {
    position: absolute;
    left: -9999rem;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 767px) {
    .solid-rr-summary {
        padding-bottom: 18px;
    }

    .solid-rr-score-col,
    .solid-rr-bars {
        margin-bottom: 16px;
    }

    .solid-rr-cta .btn {
        align-self: stretch;
        text-align: center;
    }

    .solid-rr-toolbar-sort {
        margin-left: 0;
        width: 100%;
    }

    .solid-rr-toolbar-sort .form-control {
        flex: 1;
        min-width: 0;
    }

    .solid-rr-item-head .solid-rr-stars {
        margin-left: 0;
        width: 100%;
    }

    .solid-rr-action-report {
        margin-left: 0;
    }
}

/* 320-360 px: keep the star row and the avatar from wrapping badly. */
@media (max-width: 380px) {
    .solid-rr-avatar {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        font-size: 12px;
    }

    .solid-rr-stars .material-icons {
        font-size: 18px;
    }

    .solid-rr-rate label .material-icons {
        font-size: 26px;
    }

    .solid-rr-bar-label {
        width: 36px;
    }
}