/* SEO-009: Customer Reviews page mobile-first redesign prototype.
   Isolated, self-contained stylesheet - only ever linked from
   customerreviews-redesign.aspx, so it cannot affect any other page or the
   live customerreviews.aspx. Palette extends the already-approved SEO-008
   navy/gold variables (--audi-navy/--audi-gold in star-rating.css) plus the
   new sidebar reference's green "find" action and yellow plate accents.
   Reference designs: mrcarmats-customer-reviews-panel.html (main panel) and
   mrcarmats-reviews-right-sidebar.html (sidebar). */

.crr {
    --crr-navy: #152b4a;
    --crr-gold: #f7d600;
    --crr-text: #263344;
    --crr-muted: #687587;
    --crr-line: #e2e7ee;
    --crr-soft: #f5f7fa;
    --crr-green: #147c35;
    --crr-plate: #f7d600;
    box-sizing: border-box;
    color: var(--crr-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
}

.crr *,
.crr *::before,
.crr *::after {
    box-sizing: border-box;
}

.crr__shell {
    max-width: 1180px;
    margin: 28px auto;
    padding: 0 16px;
}

/* Mobile-first: everything is a single stacked column; the grid areas below
   only kick in at the desktop breakpoint. */
.crr__layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "intro"
        "stats"
        "featured"
        "finder"
        "mfr"
        "reviews"
        "pagination"
        "moreinfo";
    gap: 18px;
}

.crr__intro { grid-area: intro; }
.crr__stats { grid-area: stats; }
.crr__featured { grid-area: featured; }
.crr__finder { grid-area: finder; }
.crr__mfr { grid-area: mfr; }
.crr__reviews { grid-area: reviews; }
.crr__pagination { grid-area: pagination; }
.crr__moreinfo { grid-area: moreinfo; }

/* Mobile: the wrapper around Car Mat Information + the manufacturer filter
   takes no box/layout role here - its two children become direct grid
   items of .crr__layout above, each keeping its own mobile grid-area
   (mfr stays near the reviews listing; moreinfo stays near the bottom),
   exactly as already tested/approved. */
.crr__sidebar-bottom {
    display: contents;
}

@media (min-width: 1024px) {
    .crr__layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        grid-template-areas:
            "intro    finder"
            "stats    finder"
            "featured finder"
            "reviews  moreinfo"
            "pagination moreinfo";
        align-items: start;
        gap: 24px;
    }

    .crr__finder {
        align-self: start;
    }

    /* Desktop: Car Mat Information and the manufacturer filter become one
       real grid item (the existing "moreinfo" area), stacked via flex, so
       the filter card always sits directly below Car Mat Information
       regardless of how tall the reviews column grows - it is no longer a
       separate grid row positioned after the whole reviews list. */
    .crr__sidebar-bottom {
        display: flex;
        flex-direction: column;
        gap: 24px;
        grid-area: moreinfo;
        align-self: start;
    }
}

/* ---------- Main panel (heading / intro) ---------- */
.crr__intro.panel {
    background: #fff;
    border: 1px solid var(--crr-line);
    border-radius: 18px;
    padding: 22px 18px;
    box-shadow: 0 8px 26px rgba(18, 40, 65, .045);
}

.crr h1 {
    margin: 0;
    font-size: clamp(22px, 5vw, 32px);
    letter-spacing: -.03em;
    color: var(--crr-navy);
    line-height: 1.2;
}

.crr__intro p {
    color: var(--crr-muted);
    margin: 10px 0 0;
    font-size: 15px;
}

/* ---------- Stats ---------- */
.crr__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 560px) {
    .crr__stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.crr__stat {
    background: var(--crr-soft);
    border: 1px solid #edf0f4;
    border-radius: 12px;
    padding: 16px 13px;
    text-align: left;
}

.crr__stat strong {
    display: block;
    color: var(--crr-navy);
    font-size: clamp(20px, 3vw, 27px);
    letter-spacing: -.03em;
    line-height: 1.2;
}

.crr__stat span {
    display: block;
    color: var(--crr-muted);
    font-size: 11.5px;
    margin-top: 6px;
}

/* ---------- Featured review ---------- */
.crr__featured {
    background: #fff;
    border: 1px solid var(--crr-line);
    border-radius: 14px;
    padding: 20px 18px;
}

.crr__featured-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.crr__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--crr-muted);
    text-transform: uppercase;
}

.crr__quoteicon {
    font-family: Georgia, serif;
    color: #d8dfe8;
    font-size: 42px;
    line-height: .6;
}

.crr__featured .audi-rating-card__stars,
.crr__card .audi-rating-card__stars {
    margin: 10px 0 0;
}

/* RenderPreciseStars' fill colour is driven by --audi-gold, which is only
   defined inside the Audi sidebar card's own ".widget .audi-rating-card"
   scope. Outside that ancestor (here, on this page) the variable is
   undefined, so without this override the stars render with the browser's
   fill fallback (black) instead of gold. */
.crr .audi-rating-card__star-bg {
    fill: #dce1e7;
}

.crr .audi-rating-card__star-fg {
    fill: #f7d600;
}

.crr__featured h2 {
    color: var(--crr-navy);
    font-size: 19px;
    line-height: 1.35;
    letter-spacing: -.01em;
    margin: 14px 0 0;
}

.crr__featured .reviewtext {
    margin-top: 10px;
    font-size: 15.5px;
    max-width: 70ch;
}

.crr__featured .byline {
    font-size: 12px;
    color: var(--crr-muted);
    margin-top: 16px;
}

.crr__featured .crr__card-mfr {
    display: block;
    margin-top: 8px;
}

/* ---------- Registration finder / benefits sidebar card ---------- */
.reviews-sidebar-card {
    background: #fff;
    border: 1px solid var(--crr-line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(20, 38, 60, .04);
    font-family: Arial, Helvetica, sans-serif;
    /* overrides any inherited .widget sizing from the legacy sidebar rules */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.reviews-sidebar-card__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--crr-muted);
    text-transform: uppercase;
}

.widget .reviews-sidebar-card__title {
    font-size: 21px;
    line-height: 1.2;
    margin: 8px 0 8px;
    color: var(--crr-navy);
    font-weight: 700;
    background: none;
    padding: 0;
    border-radius: 0;
    text-transform: none;
}

.reviews-sidebar-card__intro {
    font-size: 13.5px;
    color: var(--crr-muted);
    margin: 0 0 16px;
}

.reviews-sidebar-card__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--crr-muted);
    margin-bottom: 6px;
}

.reviews-sidebar-card__plate {
    background: var(--crr-plate);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    gap: 8px;
}

.reviews-sidebar-card__gb {
    background: #164474;
    color: #fff;
    border-radius: 5px;
    padding: 8px;
    font-size: 11px;
    font-weight: bold;
    display: grid;
    place-items: center;
}

.reviews-sidebar-card__plate-input {
    width: 100% !important;
    min-width: 0;
    border: 0;
    border-radius: 5px;
    padding: 8px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    float: none !important;
}

.reviews-sidebar-card__find {
    margin-top: 10px;
    width: 100%;
    background: var(--crr-green);
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 12px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

.reviews-sidebar-card__find:hover {
    background: #0e642a;
}

/* Reg finder loading state (spinner sits over the left of the button; inputs cannot hold pseudo-elements) */
.reviews-sidebar-card__findwrap {
    position: relative;
}

.reviews-sidebar-card__spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 16px;
    width: 16px;
    height: 16px;
    margin-top: -3px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    pointer-events: none;
    animation: crr-spin .8s linear infinite;
}

.reviews-sidebar-card__findwrap.is-loading .reviews-sidebar-card__spinner {
    display: block;
}

.reviews-sidebar-card__findwrap.is-loading .reviews-sidebar-card__find {
    cursor: progress;
    padding-left: 34px;
    background: #0e642a;
}

.reviews-sidebar-card__status {
    min-height: 18px;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--crr-muted);
}

.reviews-sidebar-card__status.is-error {
    color: #b3261e;
    font-weight: 600;
}

@keyframes crr-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-sidebar-card__spinner {
        animation: none;
        border-color: #fff;
        border-top-color: rgba(255, 255, 255, .35);
    }
}

.reviews-sidebar-card__hr {
    border: 0;
    border-top: 1px solid #e5eaf0;
    margin: 18px 0;
}

.reviews-sidebar-card__subhead {
    font-size: 15px;
    margin: 0 0 10px;
    color: var(--crr-navy);
}

.reviews-sidebar-card__benefit {
    display: flex;
    gap: 9px;
    font-size: 13.5px;
    margin: 10px 0;
}

.reviews-sidebar-card__check {
    color: var(--crr-green);
    font-size: 17px;
    line-height: 1;
}

/* ---------- Secondary sidebar info (same Car Mat Information destinations as
   every other page - #modal1-#modal5 fancybox popups rendered by the shared
   master - just a modern card/list rendering of the identical links) ---------- */
.reviews-moreinfo {
    background: #fff;
    border: 1px solid var(--crr-line);
    border-radius: 16px;
    padding: 18px 20px 20px;
}

.reviews-moreinfo h3 {
    color: var(--crr-navy);
    font-size: 15px;
    margin: 0 0 10px;
}

.reviews-moreinfo ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reviews-moreinfo li {
    margin: 0 0 8px;
}

.reviews-moreinfo a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--crr-soft);
    border: 1px solid #edf0f4;
    border-radius: 9px;
    padding: 10px 12px;
    color: var(--crr-navy);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.reviews-moreinfo a:hover {
    background: #edf1f5;
}

/* ---------- Customer reviews by manufacturer (sidebar filter card) ---------- */
.reviews-mfr-card {
    background: #fff;
    border: 1px solid var(--crr-line);
    border-radius: 16px;
    padding: 18px 20px 20px;
}

.reviews-mfr-card h3 {
    color: var(--crr-navy);
    font-size: 15px;
    margin: 0 0 6px;
}

.reviews-mfr-card__intro {
    color: var(--crr-muted);
    font-size: 13px;
    margin: 0 0 14px;
    line-height: 1.45;
}

.reviews-mfr-card__label {
    display: block;
    color: var(--crr-navy);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 6px;
}

.reviews-mfr-card__select {
    width: 100%;
    background: var(--crr-soft);
    border: 1px solid #edf0f4;
    border-radius: 9px;
    padding: 10px 12px;
    color: var(--crr-text);
    font-size: 13px;
    font-family: inherit;
}

.reviews-mfr-card__select:focus {
    outline: 2px solid var(--crr-navy);
    outline-offset: 1px;
}

/* ---------- Review cards ---------- */
.crr__reviews-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 2px 2px;
}

.crr__reviews-foot h2 {
    font-size: 18px;
    color: var(--crr-navy);
    margin: 0;
}

.crr__reviews-foot a {
    color: var(--crr-navy);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.crr__reviews-foot a:hover {
    text-decoration: underline;
}

.crr__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    /* Natural card heights - don't stretch a shorter review to match a
       longer one in the same row. */
    align-items: start;
}

/* The DataList (RepeatLayout="Flow") wraps its output and each item in <span>
   elements; display:contents makes those wrapper spans transparent to the
   grid so the real .crr__card divs become direct grid items and flow into
   both columns at the desktop breakpoint below. */
.crr__cards > span,
.crr__cards > span > span {
    display: contents;
}

@media (min-width: 700px) {
    .crr__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.crr__card {
    background: #fff;
    border: 1px solid var(--crr-line);
    border-radius: 12px;
    padding: 15px 16px;
}

.crr__card .crr__card-text {
    font-size: 14.5px;
    color: var(--crr-text);
    margin: 8px 0 0;
}

.crr__card .crr__card-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--crr-muted);
    margin-top: 10px;
}

/* SEO-009: subtle manufacturer label/link, shown only for reviews with
   verified attribution. Kept small and muted so it never competes with the
   review text itself. */
.crr__card-mfr {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--crr-muted);
}

a.crr__card-mfr--link {
    color: var(--crr-navy);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

a.crr__card-mfr--link:hover {
    text-decoration: none;
    opacity: .75;
}

/* ---------- Pagination (minimalist text-based design) ----------
   Previous/Next/First/Last are rendered as plain asp:LinkButtons (not
   image buttons) so this is pure typography - no filled buttons, boxes,
   borders or backgrounds. Same event handlers/UpdatePanel/page-size logic
   as before; only the presentation changed. */
.crr__pagination {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.crr__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
}

.crr__pager-link {
    display: inline-block;
    /* Comfortable mobile touch target without visually enlarging the text. */
    padding: 10px 6px;
    margin: -10px -6px;
    background: none;
    border: 0;
    color: var(--crr-navy);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.crr__pager-link:hover {
    text-decoration: underline;
}

/* First/Last and the review-count label stay as real server controls
   (control IDs/postbacks/ViewState untouched) but are never shown, per the
   approved "<- Previous . Page X of Y . Next ->" only design. */
.crr__pager-hidden {
    display: none !important;
}

/* ASP.NET renders a disabled LinkButton as a plain <span>, not an <a>, so
   it already has no href/postback - this only mutes it visually to show
   Previous/Next are unavailable at the first/last page. */
.crr__pager span.crr__pager-link,
.crr__pager-link[disabled] {
    color: var(--crr-muted);
    cursor: default;
    text-decoration: none;
}

.crr__pager-dot {
    color: var(--crr-muted);
}

.crr__pager-status {
    color: var(--crr-muted);
}

.crr__pager-current {
    color: var(--crr-navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.crr__pager-count {
    color: var(--crr-muted);
    font-size: 12px;
}

/* The redesign prototype never needs the legacy officialReview / ratingHeading
   blocks or the old .reviewItem list styling - hidden only within this page. */
.crr .officialReview,
.crr #reviewsBlock01 > .ratingHeading {
    display: none;
}