/* Shared right-hand sidebar panels (Reviews + Car Mat Information).
   Visual restyle only - markup, links, fancybox modals and data bindings are
   unchanged. Mirrors the card style of customer-reviews-redesign.css
   (.reviews-moreinfo). Linked from the masters that render the sidebar. */

.widget:has(.reviewWidget),
.asideBanner03 {
  --mcm-navy: #152b4a;
  --mcm-gold: #f7d600;
  --mcm-line: #e2e7ee;
  --mcm-soft: #f5f7fa;
  background: #fff;
  border: 1px solid var(--mcm-line);
  border-radius: 16px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

/* ---- Reviews ---- */
.widget:has(.reviewWidget) { padding: 18px 20px 14px; margin-bottom: 20px; }
.widget:has(.reviewWidget) h2.font-20 {
  background: none; border-radius: 0; padding: 0; margin: 0 0 12px;
  color: var(--mcm-navy); font-size: 18px; line-height: 1.3; text-transform: none; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.widget:has(.reviewWidget) h2.font-20 span { float: none; padding: 0; color: var(--mcm-gold); font-size: 14px; }
.widget:has(.reviewWidget) .reviewWidget {
  background: none; padding: 0; height: auto; max-height: 520px; overflow-y: auto;
}
.widget:has(.reviewWidget) .reviewWidget table { width: 100% !important; border-collapse: separate; border-spacing: 0; }
.widget:has(.reviewWidget) .reviewWidget td { padding: 0; display: block; }
.widget:has(.reviewWidget) .ratings {
  background: var(--mcm-soft); border: 1px solid #edf0f4; border-radius: 12px;
  padding: 12px 14px; margin: 0 0 10px;
}
.widget:has(.reviewWidget) .nameRate { padding: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--mcm-navy); }
.widget:has(.reviewWidget) .nameRate span { color: var(--mcm-gold); font-size: 11px; display: block; }
.widget:has(.reviewWidget) .ratings p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: #263344; }
.widget:has(.reviewWidget) .ratings p:last-child { color: #687587; font-size: 12px; margin-bottom: 0; }
.widget:has(.reviewWidget) .readAll {
  display: inline-block; margin-top: 4px; padding: 10px 0; min-height: 44px; box-sizing: border-box;
  color: #0a3fb5; font-size: 13px; font-weight: 600; text-transform: none; text-decoration: none;
}
.widget:has(.reviewWidget) .readAll:hover { text-decoration: underline; }

/* ---- Car Mat Information ---- */
.asideBanner03 { max-width: none; margin: 0 0 20px; padding: 18px 20px 20px; text-align: left; }
.asideBanner03 h3 {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 10px;
  color: var(--mcm-navy); font-size: 15px; font-weight: 700; text-align: left; text-transform: none;
}
.asideBanner03 ul { list-style: none; margin: 0; padding: 0; }
.asideBanner03 ul li { margin: 0 0 8px; padding: 0; }
.asideBanner03 ul li a,
.asideBanner03 ul li a.button01 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; box-sizing: border-box; margin: 0; width: auto;
  background: var(--mcm-soft); background-image: none; border: 1px solid #edf0f4; border-radius: 9px;
  padding: 10px 12px; color: var(--mcm-navy); font-size: 13px; font-weight: 600; text-align: left;
  text-decoration: none; text-shadow: none; box-shadow: none;
}
.asideBanner03 ul li a span { color: inherit; font-weight: inherit; }
.asideBanner03 ul li a::after { content: "\2197"; color: var(--mcm-navy); font-size: 14px; }
.asideBanner03 ul li a:hover { background: #edf1f5; }
.asideBanner03 ul li a:focus-visible { outline: 2px solid #0a3fb5; outline-offset: 2px; }

/* ---- "Proudly made in the United Kingdom" banner: flat trust badge replaces the full-bleed Union Jack photo ---- */
.asideBanner01.text01.version01 {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3CclipPath id='c'%3E%3Cpath d='M0 0h60v40H0z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M0 0h60v40H0z' fill='%23164474'/%3E%3Cpath d='M0 0l60 40M60 0L0 40' stroke='%23fff' stroke-width='8'/%3E%3Cpath d='M0 0l60 40M60 0L0 40' stroke='%23c8102e' stroke-width='3'/%3E%3Cpath d='M30 0v40M0 20h60' stroke='%23fff' stroke-width='12'/%3E%3Cpath d='M30 0v40M0 20h60' stroke='%23c8102e' stroke-width='7'/%3E%3C/g%3E%3C/svg%3E") no-repeat 18px center / 44px 30px !important;
  border: 1px solid #e2e7ee !important; border-radius: 16px !important;
  padding: 14px 18px 14px 76px !important; margin: 0 0 20px !important;
  text-align: left !important; font-family: Arial, Helvetica, sans-serif; font-size: 14px !important; line-height: 1.35;
}
.asideBanner01.text01.version01 p { margin: 0; }
.asideBanner01.text01.version01 small { display: block; color: #687587 !important; font-size: 12px; }
.asideBanner01.text01.version01 span { color: #152b4a !important; font-size: 15px !important; font-weight: 700; }

/* ---- Inline site-reviews rating card (Audi manufacturer page body) ---- */
.audi-rating-card--inline {
  --audi-navy: #152b4a; --audi-gold: #f7d600; --audi-muted: #687587;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  box-sizing: border-box; max-width: 100%; margin: 0 0 20px; padding: 16px 20px;
  background: #fff; border: 1px solid #e2e7ee; border-radius: 16px;
  box-shadow: 0 8px 26px rgba(18, 40, 65, .045); font-family: Arial, Helvetica, sans-serif;
}
.audi-rating-card--inline .audi-rating-card__link {
  min-height: 44px; padding: 0 16px; border: 1px solid #e2e7ee; border-radius: 9px; background: #f5f7fa;
}
@media (max-width: 480px) {
  .audi-rating-card--inline { padding: 14px 16px; }
  .audi-rating-card--inline .audi-rating-card__link { width: 100%; box-sizing: border-box; }
}

/* Review stars: one bright yellow across the site */
.widget .fa-star, .widget .fa-star-o { color: #f7d600 !important; }