/*
 * reviews-drawer: Yotpo reviews in a Web Awesome drawer, plus the side tab.
 * Yotpo's widgets are styled for a light background, so the drawer stays
 * light in dark mode too.
 */

/* side tab: on the window's right edge, 1080px and wider; hidden while any
   drawer is open (Web Awesome puts .wa-scroll-lock on html) */
.tcc-rv-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 110px;
  height: auto; /* undo Web Awesome's native button height and single line */
  min-height: 0;
  margin: 0;
  padding: 12px 10px;
  white-space: normal;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px 0 0 8px;
  background: #2d90f0;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, .15);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
@media (min-width: 1080px) {
  .tcc-rv-tab {
    display: flex;
  }
}
html.wa-scroll-lock .tcc-rv-tab {
  visibility: hidden;
}
.tcc-rv-tab:hover {
  background: #1f7fdc;
}
.tcc-rv-tab:focus-visible {
  outline: 3px solid #0f2b50;
  outline-offset: 2px;
}
.tcc-rv-tab b {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.tcc-rv-tab wa-rating {
  --symbol-color: rgba(255, 255, 255, .35);
  --symbol-color-active: #ffc700;
  --symbol-spacing: 0px;
  font-size: 13px; /* five stars in 88px, inside the tab's padding */
}
.tcc-rv-tab > wa-icon {
  color: #ffc700;
  font-size: 25px;
}
.tcc-rv-tab small {
  font-size: 12px;
  line-height: 1.1;
}
.tcc-rv-tab img {
  width: 70px;
}

.tcc-rv {
  --size: 480px;
}

/* While the drawer is open, tcc-reviews.js moves the side tab onto its left edge
   so it slides in and out with it, above the dimmed page. The drawer must not
   clip it; the reviews still scroll inside the body part. */
.tcc-rv::part(dialog) {
  overflow: visible;
}
.tcc-rv::part(footer) {
  padding: 0;
  border: 0;
}
.tcc-rv > .tcc-rv-tab {
  position: absolute;
  top: 50%;
  right: auto;
  left: -110px;
  display: flex;
}
html.wa-scroll-lock .tcc-rv > .tcc-rv-tab {
  visibility: visible;
}
.tcc-rv[placement="bottom"] {
  --size: 90vh;
}
.tcc-rv::part(dialog) {
  background: #f7f7f7;
  color: #333;
}
.tcc-rv[placement="bottom"]::part(dialog) {
  border-radius: 20px 20px 0 0;
}
.tcc-rv::part(body) {
  padding: 0;
}

/* heading and tabs stay put while the reviews scroll */
.tcc-rv__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 12px 0 20px;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
}
.tcc-rv__title {
  margin: 0;
  font-family: var(--wa-font-family-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f2b50;
}
.tcc-rv__title span {
  margin-left: 6px;
  font-family: var(--wa-font-family-body);
  font-size: .95rem;
  font-weight: 600;
  color: #555;
}
.tcc-rv .tcc-rv__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f0f2f5;
  color: #0f2b50;
  font-size: 1.1rem;
  cursor: pointer;
}

.tcc-rv__tabs {
  --indicator-color: #2d90f0;
  --track-color: #e3e3e3;
}
.tcc-rv__tabs::part(nav) {
  position: sticky;
  top: 60px;
  z-index: 1;
  background: #fff;
}
.tcc-rv__tabs wa-tab {
  flex: 1 1 0;
  min-width: 0;
}
/* one line each, so the bar stays short on narrow screens */
.tcc-rv__tabs wa-tab::part(base) {
  justify-content: center;
  padding: 14px 10px 14px 20px;
  color: #555;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcc-rv__tabs wa-tab[active]::part(base) {
  color: #0f2b50;
}
.tcc-rv__tabs wa-tab-panel {
  --padding: 0;
}

/* Web Awesome's native element styles, undone where Yotpo doesn't set its own:
   they indent lists (and so push the pagination sideways), shrink the
   verified-buyer tick to nothing, and change Yotpo's buttons. */
.tcc-rv :is(ul, ol) {
  margin: 0;
  padding: 0;
}
.tcc-rv li {
  margin: 0;
}
.tcc-rv .yotpo-widget-instance :is(p, h1, h2, h3, h4) {
  margin-block: 0;
}
.tcc-rv .yotpo-widget-instance svg {
  max-width: none;
  flex: none;
}
.tcc-rv .yotpo-widget-instance button {
  min-height: 0;
}

/* "Independent reviews verified by [Yotpo]" */
.tcc-rv .yotpo-label {
  margin: 14px 0 6px;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}
.tcc-rv .yotpo-label img {
  width: 70px;
  vertical-align: middle;
}

/* Yotpo widgets: as on the old slide-out */
.tcc-rv .yotpo-widget-instance .yotpo-base-layout {
  width: auto !important;
}
.tcc-rv .yotpo-widget-instance .yotpo-base-layout .yotpo-head,
.tcc-rv .yotpo-widget-instance .yotpo-filters-container,
.tcc-rv .yotpo-widget-instance .yotpo-new-review-btn-wrapper,
.tcc-rv .yotpo-seo-page-tabs {
  display: none;
}
.tcc-rv .yotpo-widget-instance :is(.yotpo-seo-page-layout, .yotpo-main-widget-layout) {
  margin: auto 15px;
  font-size: 15px;
}
.tcc-rv .yotpo-widget-instance :is(.yotpo-seo-page-layout, .yotpo-main-widget-layout, .yotpo-read-more-text, .yotpo-date-format, .yotpo-text-link-title) {
  font-family: var(--wa-font-family-body);
}
.tcc-rv .yotpo-bottomline-container,
.tcc-rv div.yotpo-display-m .yotpo-main-layout .yotpo-layout-header-wrapper {
  margin-top: 0;
  margin-bottom: 10px;
}
.tcc-rv .yotpo-widget-instance .yotpo-base-layout .yotpo-bottom-line .yotpo-bottom-line-left-panel.yotpo-bottom-line-score {
  padding-top: 0;
}
.tcc-rv .yotpo-widget-instance .yotpo-base-layout .yotpo-bottom-line .yotpo-bottom-line-summary {
  align-items: stretch;
  padding-right: 0;
}
.tcc-rv .yotpo-widget-instance .yotpo-bottom-line .yotpo-bottom-line-right-panel {
  padding-right: 20px;
}
.tcc-rv .yotpo-widget-instance .yotpo-base-layout .yotpo-review {
  flex-direction: column;
  margin: 15px 0;
}
.tcc-rv .yotpo-widget-instance .yotpo-review-rating-title {
  margin: 10px 0;
}
.tcc-rv .yotpo-widget-instance .yotpo-base-layout .yotpo-review-title {
  margin-left: 10px;
  font-size: 16px;
}
.tcc-rv .yotpo-widget-instance .yotpo-review-content .yotpo-read-more-text {
  line-height: 22px;
}
.tcc-rv .yotpo-widget-instance .yotpo-star-rating .star-container:last-of-type {
  margin-right: 0;
}
.tcc-rv .yotpo-widget-instance .yotpo-reviews-pagination-container {
  margin-bottom: 40px;
}
/* dividers between reviews only */
.tcc-rv .yotpo-widget-instance .yotpo-review-border-smooth {
  display: none;
}
.tcc-rv .yotpo-widget-instance :is(.yotpo-reviews-list, .yotpo-reviews-seo-list) .yotpo-review-border-smooth,
.tcc-rv .yotpo-widget-instance .yotpo-header-container + .yotpo-review-border-smooth,
.tcc-rv .yotpo-widget-instance .yotpo-base-layout > .yotpo-review-border-smooth {
  display: block;
}

wa-tab-panel[name=course] .yotpo-display-l .yotpo-main-layout .yotpo-layout-header-wrapper .yotpo-bottom-line {
  margin-right: 0;
}
wa-tab-panel[name=course] .yotpo-vertical-border {
  display: none;
}