/**
 * HCR Customer Reviews — front-end styles.
 *
 * Self-contained; the palette mirrors the hcr-sections widgets so the carousel
 * sits beside them without a theme dependency.
 * Breakpoints: 1024px (tablet), 768px (small tablet), 480px (phone).
 */


/*
 * :where() keeps the specificity at zero, so an accent colour Elementor writes
 * onto the widget wrapper wins and inherits down into all of these.
 */

:where(.hcr-rv-section, .hcr-rv-carousel, .hcr-rv-modal, .hcr-rv-actions) {
    --hcr-rv-orange: #fe8742;
    --hcr-rv-orange-dark: #e46216;
    --hcr-rv-dark: #101518;
    --hcr-rv-ink: #0b0f12;
    --hcr-rv-body: #4a5259;
    --hcr-rv-muted: #8a94a0;
    --hcr-rv-line: #e3e7eb;
    --hcr-rv-star: #ffb800;
    --hcr-rv-font-head: "Oswald", sans-serif;
    --hcr-rv-font-body: "Rubik", sans-serif;
    box-sizing: border-box;
    font-family: var(--hcr-rv-font-body);
    color: var(--hcr-rv-body);
    line-height: 1.6;
}

.hcr-rv-section *,
.hcr-rv-section *::before,
.hcr-rv-section *::after,
.hcr-rv-carousel *,
.hcr-rv-carousel *::before,
.hcr-rv-carousel *::after,
.hcr-rv-modal *,
.hcr-rv-modal *::before,
.hcr-rv-modal *::after {
    box-sizing: border-box;
}


/* ---------------------------------------------------------------------
 * Section shell (the Elementor widget)
 * ------------------------------------------------------------------ */

.hcr-rv-section {
    display: block;
    /* padding: 72px 0;We Buy All Brands Of Cars */
}

.hcr-rv-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hcr-rv-head {
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: center;
}

.hcr-rv-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hcr-rv-orange-dark);
}

.hcr-rv-h2 {
    margin: 0 0 14px;
    font-family: var(--hcr-rv-font-head);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--hcr-rv-ink);
}

.hcr-rv-average {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 15px;
}

.hcr-rv-average .hcr-rv-stars {
    margin: 0;
    font-size: 20px;
}

.hcr-rv-average__score {
    font-family: var(--hcr-rv-font-head);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--hcr-rv-ink);
}

.hcr-rv-average__count {
    color: var(--hcr-rv-muted);
}

.hcr-rv-intro {
    margin: 0;
    font-size: 16px;
}


/* ---------------------------------------------------------------------
 * Stars (display)
 * ------------------------------------------------------------------ */

.hcr-rv-stars {
    position: relative;
    display: inline-block;
    margin: 0 0 12px;
    font-size: 17px;
    letter-spacing: 3px;
    line-height: 1;
    white-space: nowrap;
}

.hcr-rv-stars__off {
    color: #d9dee3;
}

.hcr-rv-stars__on {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--hcr-rv-star);
}


/* ---------------------------------------------------------------------
 * Carousel
 * ------------------------------------------------------------------ */

.hcr-rv-carousel {
    --hcr-rv-per: 3;
    --hcr-rv-gap: 20px;
    position: relative;
    padding: 0 0 8px;
}

.hcr-rv-track {
    display: flex;
    gap: var(--hcr-rv-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 18px;
    margin: 0;
    /* The scrollbar is replaced by the arrows and dots below. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hcr-rv-track::-webkit-scrollbar {
    display: none;
}

.hcr-rv-track:focus-visible {
    outline: 2px solid var(--hcr-rv-orange-dark);
    outline-offset: 4px;
    border-radius: 12px;
}


/*
 * The card is flat: no panel, no border, no shadow. It reads directly off the
 * section background, with the avatar, name, stars and text stacked.
 */

.hcr-rv-card {
    flex: 0 0 calc((100% - (var(--hcr-rv-per) - 1) * var(--hcr-rv-gap)) / var(--hcr-rv-per));
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: transparent;
}

.hcr-rv-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.hcr-rv-card__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--hcr-rv-orange-dark);
    color: #fff;
    font-family: var(--hcr-rv-font-head);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.25s ease;
}


/*
 * Avatar colours cycle so a row of cards is not one flat block of orange; the
 * whole row turns brand orange on hover.
 */

.hcr-rv-card:nth-child(4n + 1) .hcr-rv-card__avatar {
    background: #512da8;
}

.hcr-rv-card:nth-child(4n + 2) .hcr-rv-card__avatar {
    background: #c2185b;
}

.hcr-rv-card:nth-child(4n + 3) .hcr-rv-card__avatar {
    background: #0288d1;
}

.hcr-rv-card:nth-child(4n + 4) .hcr-rv-card__avatar {
    background: #00796b;
}

.hcr-rv-card:hover .hcr-rv-card__avatar {
    background: #f37925;
}

.hcr-rv-card__who {
    min-width: 0;
}

.hcr-rv-card__name {
    margin: 0 0 2px;
    padding-right: 25px;
    font-family: var(--hcr-rv-font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    color: #000;
    /* Long names are clipped rather than wrapped, so every head is one line. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hcr-rv-card__when {
    display: block;
    padding-top: 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #000;
}


/* Stars inside a card carry the spacing; the average-rating stars do not. */


/*
 * Margin, not padding: .hcr-rv-stars__on is absolutely positioned against the
 * padding box, so padding here would slide the gold overlay off the grey stars.
 */

.hcr-rv-card .hcr-rv-stars {
    margin: 15px 0 20px;
    font-size: 18px;
    letter-spacing: 0.2em;
}


/*
 * Fixed height with the overflow clipped: cards keep a common baseline no
 * matter how long the review is.
 */

.hcr-rv-card__text {
    flex: 0 0 auto;
    height: 100px;
    margin: 0 0 15px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
    text-transform: capitalize;
    color: var(--hcr-rv-dark);
    overflow-wrap: anywhere;
}

.hcr-rv-card__figure {
    margin: 16px 0 0;
}

.hcr-rv-card__img {
    display: block;
    width: 100%;
    height: 170px;
    border-radius: 10px;
    object-fit: cover;
}


/* Arrows */

.hcr-rv-nav {
    position: absolute;
    top: calc(50% - 12px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--hcr-rv-line);
    border-radius: 50%;
    background: #fff;
    color: var(--hcr-rv-ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 21, 24, 0.12);
    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.hcr-rv-nav:hover,
.hcr-rv-nav:focus-visible {
    background: var(--hcr-rv-orange-dark);
    border-color: var(--hcr-rv-orange-dark);
    color: #fff;
}

.hcr-rv-nav--prev {
    left: -14px;
    transform: translateY(-50%);
}

.hcr-rv-nav--next {
    right: -14px;
    transform: translateY(-50%);
}

.hcr-rv-nav[disabled] {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.hcr-rv-nav[disabled]:hover {
    background: #fff;
    border-color: var(--hcr-rv-line);
    color: var(--hcr-rv-ink);
}


/* Hidden entirely when everything already fits on screen. */

.hcr-rv-carousel.is-static .hcr-rv-nav,
.hcr-rv-carousel.is-static .hcr-rv-dots {
    display: none;
}

.hcr-rv-carousel.is-static .hcr-rv-track {
    overflow-x: visible;
    flex-wrap: wrap;
}


/* Dots */

.hcr-rv-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.hcr-rv-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cdd4da;
    cursor: pointer;
    transition: background-color 0.2s, width 0.2s;
}

.hcr-rv-dot.is-active {
    width: 26px;
    border-radius: 6px;
    background: var(--hcr-rv-orange-dark);
}


/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */

.hcr-rv-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.hcr-rv-btn {
    display: inline-block;
    padding: 14px 34px;
    border: 2px solid transparent;
    border-radius: 6px;
    font-family: var(--hcr-rv-font-head);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.hcr-rv-btn--dark {
    background: var(--hcr-rv-dark);
    border-color: var(--hcr-rv-dark);
    color: #fff;
}

.hcr-rv-btn--dark:hover,
.hcr-rv-btn--dark:focus {
    background: var(--hcr-rv-orange-dark);
    border-color: var(--hcr-rv-orange-dark);
    color: #fff;
}

.hcr-rv-btn--orange {
    background: var(--hcr-rv-orange-dark);
    border-color: var(--hcr-rv-orange-dark);
    color: #fff;
}

.hcr-rv-btn--orange:hover,
.hcr-rv-btn--orange:focus {
    background: var(--hcr-rv-dark);
    border-color: var(--hcr-rv-dark);
    color: #fff;
}

.hcr-rv-btn--ghost {
    background: transparent;
    border-color: var(--hcr-rv-dark);
    color: var(--hcr-rv-dark);
}

.hcr-rv-btn--ghost:hover,
.hcr-rv-btn--ghost:focus {
    background: var(--hcr-rv-dark);
    color: #fff;
}


/* ---------------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------------ */

.hcr-rv-empty {
    padding: 34px 20px;
    border: 1px dashed var(--hcr-rv-line);
    border-radius: 12px;
    text-align: center;
    color: var(--hcr-rv-muted);
    font-family: var(--hcr-rv-font-body);
}


/* ---------------------------------------------------------------------
 * Write Review popup
 *
 * A like-for-like copy of the pop-up on harbourcarremoval.com.au: plain
 * white 400px card on a #000000aa sheet, small red X hanging off the
 * top-right corner, stacked 38px fields, black Submit button.
 *
 * Almost everything below is hung off #hcr-review-modal on purpose. Astra's
 * own stylesheet and the child theme's main.css both load AFTER this file and
 * both style bare input/select/textarea/button, so class-only selectors here
 * would lose the cascade to them. The ID keeps the pop-up looking the same
 * wherever it is dropped.
 * ------------------------------------------------------------------ */

#hcr-review-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: block;
    overflow-y: auto;
}

#hcr-review-modal[hidden] {
    display: none;
}

#hcr-review-modal .hcr-rv-modal__backdrop {
    position: fixed;
    inset: 0;
    background: #000000aa;
}

#hcr-review-modal .hcr-rv-modal__dialog {
    position: relative;
    z-index: 1;
    width: 400px;
    max-width: calc(100% - 38px);
    margin: 80px auto;
    padding: 20px;
    background: #fff;
}

#hcr-review-modal .hcr-rv-modal__x {
    position: absolute;
    right: -19px;
    top: -19px;
    width: 20px;
    height: 20px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: red;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
}

#hcr-review-modal .hcr-rv-modal__title {
    display: block;
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--hcr-rv-font-head);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center;
    text-transform: uppercase;
    color: #000;
}


/* Fields — one flat stack, no labels; the placeholders carry the names. */

#hcr-review-modal .hcr-rv-field {
    margin: 0;
}

#hcr-review-modal .hcr-rv-form input,
#hcr-review-modal .hcr-rv-form select,
#hcr-review-modal .hcr-rv-form textarea {
    display: block;
    width: 98%;
    height: 38px;
    min-height: 0;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #949494;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    color: #0b0f12;
}

#hcr-review-modal .hcr-rv-form textarea {
    resize: vertical;
}

#hcr-review-modal .hcr-rv-form input:focus,
#hcr-review-modal .hcr-rv-form select:focus,
#hcr-review-modal .hcr-rv-form textarea:focus {
    border-color: #949494;
    outline: 1px solid #000;
    outline-offset: -1px;
    box-shadow: none;
}

#hcr-review-modal .hcr-rv-form input[type="file"] {
    padding: 8px 10px;
    font-size: 14px;
}

#hcr-review-modal .hcr-rv-field.has-error input,
#hcr-review-modal .hcr-rv-field.has-error select,
#hcr-review-modal .hcr-rv-field.has-error textarea {
    border-color: #d63638;
}

#hcr-review-modal .hcr-rv-error {
    display: none;
    margin: 0 1% 4px;
    font-size: 13px;
    color: #d63638;
}

#hcr-review-modal .hcr-rv-field.has-error .hcr-rv-error {
    display: block;
}


/* Honeypot: off-screen rather than display:none, which some bots skip. */

#hcr-review-modal .hcr-rv-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* Submit */

#hcr-review-modal .hcr-rv-submit,
#hcr-review-modal .hcr-rv-done__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 40px;
    margin: 10px auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 34px;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
}

#hcr-review-modal .hcr-rv-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

#hcr-review-modal .hcr-rv-form__msg {
    margin: 12px 0 0;
    font-size: 14px;
    text-align: center;
    color: #0b0f12;
}

#hcr-review-modal .hcr-rv-form__msg:empty {
    display: none;
}

#hcr-review-modal .hcr-rv-form__msg.is-error {
    color: #b32d2e;
}


/* Thank-you panel, shown in place of the form after a successful send. */

#hcr-review-modal .hcr-rv-done {
    padding: 10px 0 4px;
    text-align: center;
}

#hcr-review-modal .hcr-rv-done[hidden] {
    display: none;
}

#hcr-review-modal .hcr-rv-done__msg {
    margin: 0;
    font-size: 15px;
    color: #0b0f12;
}


/* Labels that exist for screen readers only. */

#hcr-review-modal .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* Stop the page behind the popup from scrolling. */

body.hcr-rv-locked {
    overflow: hidden;
}


/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
    .hcr-rv-carousel {
        --hcr-rv-per: var(--hcr-rv-per-t, 2);
        --hcr-rv-gap: 20px;
    }
    .hcr-rv-nav--prev {
        left: -8px;
    }
    .hcr-rv-nav--next {
        right: -8px;
    }
}

@media (max-width: 768px) {
    .hcr-rv-carousel {
        --hcr-rv-per: var(--hcr-rv-per-m, 1);
        --hcr-rv-gap: 16px;
    }
    /* On phones the arrows would sit on top of the card — move them below. */
    .hcr-rv-nav {
        /* position: static; */
        transform: none;
        width: 40px;
        height: 40px;
    }
    .hcr-rv-carousel {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "track track track" "prev  dots  next";
        align-items: center;
        row-gap: 6px;
    }
    .hcr-rv-track {
        grid-area: track;
    }
    .hcr-rv-nav--prev {
        /* grid-area: prev; */
        justify-self: start;
    }
    .hcr-rv-nav--next {
        /* grid-area: next; */
        justify-self: end;
    }
    .hcr-rv-dots {
        grid-area: dots;
        margin-top: 0;
    }
    /* The host section supplies the vertical padding; adding more doubles it. */
    .hcr-rv-h2 {
        font-size: 26px;
    }
    .hcr-rv-head {
        margin-bottom: 28px;
    }
    /* Full-width card on phones, with the X moved inside the corner. */
    #hcr-review-modal .hcr-rv-modal__dialog {
        width: 100%;
        max-width: 100%;
        margin: 40px 0;
    }
    #hcr-review-modal .hcr-rv-modal__x {
        right: 15px;
        top: 13px;
        z-index: 2;
    }
    #hcr-review-modal .hcr-rv-modal__title {
        font-size: 24px;
    }
    .hcr-rv-card__text {
        height: 70px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .hcr-rv-card__avatar {
        width: 39px;
        height: 39px;
        font-size: 17px;
    }
    .hcr-rv-card__name {
        font-size: 16px;
    }
    .hcr-rv-card__when {
        font-size: 14px;
    }
    .hcr-rv-card__text {
        font-size: 14px;
    }
    .hcr-rv-card__img {
        height: 150px;
    }
    .hcr-rv-btn {
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hcr-rv-track {
        scroll-behavior: auto;
    }
    .hcr-rv-modal__backdrop,
    .hcr-rv-modal__dialog,
    .hcr-rv-nav,
    .hcr-rv-dot {
        transition: none;
    }
}