/* ============================================================
   RB Testimonials – CSS custom-property driven
   ============================================================ */

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

/* Testimonials hero H1 — scoped via #rb-testim (the id on the row wrapping
   this shortcode's own section on the Testimonials page), NOT a page ID —
   page IDs differ across environments (local/staging/production), so a
   body.page-id-X selector only ever works on the one site it was written
   for. The H1 lives in a section that comes BEFORE the one containing
   #rb-testim, reached via :has() + general sibling "~" (not assuming
   they're immediately adjacent). Requires CSS :has() support (all major
   browsers since ~2023).
   Suppresses the theme's decorative gold left-border accent that ships
   with every h1, and fixes the theme's default h1 size rendering smaller
   than this section's own H2 below it. */
.et_pb_section:has(~ .et_pb_section #rb-testim) h1::before {
    display: none !important;
}

.et_pb_section:has(~ .et_pb_section #rb-testim) h1 {
    padding-left: 0 !important;
    font-size: 52px !important;
    letter-spacing: 1px;
}

@media (max-width: 980px) {
    .et_pb_section:has(~ .et_pb_section #rb-testim) h1 { font-size: 40px !important; }
}

@media (max-width: 640px) {
    .et_pb_section:has(~ .et_pb_section #rb-testim) h1 { font-size: 32px !important; }
}

/* ── Default token values (overridden by wp_add_inline_style) ── */
.rb-testimonials-section {
    --rb-accent:        #f6c250;
    --rb-dark-start:    #000000;
    --rb-dark-mid:      #16181f;
    --rb-dark-end:      #1b1c24;
    --rb-card-fallback: #1b1c24;
    --rb-grid-bg:       #f7f7f8;
    --rb-grid-card-bg:  #ffffff;
    --rb-grid-text:     #4a4a4a;
    --rb-grid-author:   #9c7a12;
    --rb-heading:       #ffffff;
    --rb-tagline:       #f6c250;
    --rb-star-on:       #9c7a12;
    --rb-star-off:      #d8d8da;
    /* Matches the site's own body typography (Divi/theme default) and its
       branded display font (already loaded by the active theme's stylesheet,
       used for every major headline on russbrown.com) — no @font-face needed here. */
    --rb-font-body:     'Open Sans', Arial, sans-serif;
    --rb-font-display:  'DCCASH', Arial, sans-serif;
    font-family: var(--rb-font-body);
    width: 100%;
}

.rb-test-wrap {
    width: 100%;
    padding: 0 24px;
}

/* ============================================================
   DARK FEATURED SECTION
   ============================================================ */
.rb-test-dark {
    background: linear-gradient(135deg, var(--rb-dark-start) 0%, var(--rb-dark-mid) 55%, var(--rb-dark-end) 100%);
    padding: 52px 0 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.rb-test-dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: var(--rb-accent);
}

.rb-test-dark::after { display: none; }

.rb-test-tagline {
    position: relative; z-index: 1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--rb-tagline);
    margin: 0 0 10px;
}

.rb-test-heading {
    position: relative; z-index: 1;
    font-family: var(--rb-font-display);
    font-size: 34px;
    font-weight: normal;
    letter-spacing: 1px;
    color: var(--rb-heading);
    margin: 0 0 36px;
    line-height: 1.25;
}

/* ── Featured cards row (column count set via inline style) ───
   Each "card" is a small thumbnail beside its quote, not a full-bleed
   photo card — matches the reference layout: photo + play button on
   the left, italic quote and author name to its right. ─────────── */
.rb-test-cards {
    display: grid;
    grid-template-columns: repeat(var(--rb-cols, 3), 1fr);
    --rb-card-gap: 32px;
    gap: 26px var(--rb-card-gap);
    position: relative; z-index: 1;
}

.rb-test-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Featured carousel (more featured cards than fit in one row) ── */
.rb-test-cards-viewport {
    position: relative;
    overflow: hidden;
}

.rb-test-cards.rb-test-cards--carousel {
    display: flex;
    flex-wrap: nowrap;
    transition: transform .4s ease;
}

.rb-test-cards--carousel .rb-test-card {
    flex: 0 0 calc((100% - var(--rb-card-gap, 32px) * (var(--rb-cols, 3) - 1)) / var(--rb-cols, 3));
}

.rb-test-cards-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(17,18,20,0.7);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .2s, border-color .2s, transform .2s, opacity .2s;
}

.rb-test-cards-arrow:hover:not(:disabled) {
    background: rgba(201,168,76,0.35);
    border-color: var(--rb-accent);
    transform: translateY(-2px);
}

.rb-test-cards-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.rb-test-cards-arrow--prev { left: 10px; }
.rb-test-cards-arrow--next { right: 10px; }

/* On real pointer/hover devices the arrows sit right over the quote text
   at the edges of the row, so keep them hidden until the row is actually
   hovered (or focused via keyboard). Touch devices report no hover, so
   they keep the arrows always visible — there's no hover state to reveal
   them with, and dots alone aren't as discoverable as arrows. */
@media (hover: hover) and (pointer: fine) {
    .rb-test-cards-arrow,
    .rb-test-cards-arrow:disabled {
        opacity: 0;
    }

    .rb-test-cards-viewport:hover .rb-test-cards-arrow,
    .rb-test-cards-arrow:focus-visible {
        opacity: 1;
    }

    .rb-test-cards-viewport:hover .rb-test-cards-arrow:disabled {
        opacity: 0.3;
    }
}

.rb-test-cards-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

/* Thumbnail — rounded photo with a centred play button on top */
.rb-test-card-thumb {
    position: relative;
    flex-shrink: 0;
    width: 220px;
    height: 165px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--rb-card-fallback);
    background-size: cover;
    background-position: center;
}

.rb-test-card-thumb--initials {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Author initials circle, shown when there's no video thumbnail image */
.rb-test-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(201,168,76,0.15);
    border: 2px solid rgba(201,168,76,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--rb-accent);
    pointer-events: none;
    flex-shrink: 0;
}

/* Category badge — sits above the quote, next to the thumbnail */
.rb-test-badge {
    align-self: flex-start;
    background: rgba(201,168,76,0.12);
    border: 1px solid rgba(201,168,76,0.4);
    color: var(--rb-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 11px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Play button — invisible hit-area covering the whole thumbnail, so the
   entire photo is clickable, not just the small red circle. */
.rb-test-play {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    display: block;
}

/* The visible red circle + arrow — purely decorative, sits inside the
   full-size hit-area above so clicks anywhere on the thumb register. */
.rb-test-play-icon {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    background: #d1382b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: background .2s, transform .2s;
    pointer-events: none;
}

/* CSS-drawn triangle instead of the unicode glyph — the glyph's font
   metrics render it off-centre in most typefaces, a border-triangle
   centres exactly regardless of font. */
.rb-test-play-icon::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}

.rb-test-play:hover .rb-test-play-icon,
.rb-test-play:focus-visible .rb-test-play-icon {
    background: #b32c21;
    transform: scale(1.08);
}

.rb-test-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rb-test-card-quote {
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.55;
    color: #dbe4ee;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rb-test-card-author {
    font-family: var(--rb-font-display);
    font-size: 14px;
    font-weight: normal;
    color: var(--rb-accent);
    letter-spacing: 0.06em;
}

/* ============================================================
   REVIEW GRID
   ============================================================ */
.rb-test-grid-section {
    background: var(--rb-grid-bg);
    padding: 48px 0 52px;
}

.rb-test-grid {
    display: grid;
    grid-template-columns: repeat(var(--rb-cols, 3), 1fr);
    gap: 20px;
}

.rb-test-grid-item {
    background: var(--rb-grid-card-bg);
    border-radius: 6px;
    padding: 22px 20px 18px;
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: border-color .2s ease;
}

.rb-test-grid-item:hover {
    border-color: rgba(0,0,0,0.2);
}

/* Dark variant — [rb_testimonials grid_theme="dark"]. Overriding the same
   custom properties the light theme reads means every rule below (stars,
   quote, author) stays correct with no duplication. */
.rb-test-grid-section--dark {
    --rb-grid-bg:      #121214;
    --rb-grid-card-bg: #1d1d20;
    --rb-grid-text:    #d6d3ca;
    --rb-grid-author:  #e6b355;
    --rb-star-on:      #e6b355;
    --rb-star-off:     #47474c;
}
.rb-test-grid-section--dark .rb-test-grid-item {
    border-color: rgba(255,255,255,0.08);
}
.rb-test-grid-section--dark .rb-test-grid-item:hover {
    border-color: rgba(255,255,255,0.18);
}

.rb-stars { display: flex; justify-content: center; gap: 2px; margin-bottom: 10px; }
.rb-star  { font-size: 18px; color: var(--rb-star-off); line-height: 1; }
.rb-star.filled { color: var(--rb-star-on); }

.rb-test-grid-quote {
    flex: 1;
    font-size: 13px;
    line-height: 1.7;
    color: var(--rb-grid-text);
    margin-bottom: 14px;
}

/* The theme has a global "body p{font-family:...!important;font-size:18px}"
   rule that directly targets every <p> tag site-wide. A directly-matched
   rule always beats an inherited value, so without this override, any
   testimonial whose content happens to be wrapped in <p> tags (e.g. a short
   quote, always rendered as <p>...</p>, or a card falling back to the full
   post body when no short quote is set) renders in the theme's font instead
   of ours — while ones whose raw content has no <p> wrapper at all look
   "correct" only by accident. Applies to every page using this grid, not
   just one — previously scoped to a manually-set Divi CSS ID that didn't
   survive page duplication. */
.rb-test-grid-quote p {
    margin: 0;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.rb-test-grid-author {
    font-family: var(--rb-font-display);
    font-size: 15px;
    font-weight: normal;
    color: var(--rb-grid-author);
    letter-spacing: 0.06em;
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

/* ── Pagination ──────────────────────────────────────────────────────
   Minimal style: plain numbers, no pill/circle chrome — the active page
   is just gold + underlined, like a simple text tab row. ─────────────── */
.rb-test-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.rb-test-pagination:empty {
    margin-top: 0;
}

.rb-test-pagination-list {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0;
    padding: 0;
}

.rb-test-pagination-list li {
    display: flex;
}

.rb-test-pagination-list a,
.rb-test-pagination-list button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 32px;
    padding: 0 1px;
    border: none;
    background: none;
    color: var(--rb-grid-text, #4a4a4a);
    font-family: var(--rb-font-body, inherit);
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s;
}

.rb-test-pagination-list a:hover:not(.is-disabled):not(.is-active),
.rb-test-pagination-list button:hover:not(:disabled):not(.is-active) {
    color: var(--rb-grid-author, #9c7a12);
}

.rb-test-pagination-list a.is-active,
.rb-test-pagination-list button.is-active {
    color: var(--rb-grid-author, #9c7a12);
}

.rb-test-pagination-list a.is-active::after,
.rb-test-pagination-list button.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    background: var(--rb-grid-author, #9c7a12);
    border-radius: 2px;
}

.rb-test-pagination-list a.is-disabled,
.rb-test-pagination-list button.is-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.rb-test-pagination-list .rb-test-pagination-arrow {
    font-size: 20px;
    color: var(--rb-grid-text, #4a4a4a);
}

/* Empty */
.rb-test-empty {
    text-align: center;
    color: #aaa;
    font-style: italic;
    padding: 32px 0;
}

/* ============================================================
   SLIDER LAYOUT
   ============================================================ */
.rb-test-slider-section {
    padding: 48px 20px 52px;
    text-align: center;
}

.rb-test-slider {
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.rb-test-slides {
    display: flex;
    transition: transform 0.5s ease;
}

.rb-test-slide {
    min-width: 100%;
    padding: 0 24px;
}

/* Stars row */
.rb-test-slide .rb-stars {
    justify-content: center;
    margin-bottom: 28px;
}

.rb-test-slide .rb-star {
    font-size: 34px;
}

/* Quote text */
.rb-test-slider-quote {
    font-size: 16px;
    font-style: italic;
    line-height: 1.8;
    color: var(--rb-grid-text);
    margin-bottom: 28px;
}

.rb-test-slider-quote p {
    margin: 0;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* Author */
.rb-test-slider-author {
    font-family: var(--rb-font-display);
    font-size: 17px;
    font-weight: normal;
    letter-spacing: 0.06em;
    color: var(--rb-grid-author);
}

/* Dot navigation */
.rb-test-slider-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.rb-test-slider-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s;
}

.rb-test-slider-dot.active { background: var(--rb-accent); }

/* ============================================================
   VIDEO POPUP
   ============================================================ */
.rb-test-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.rb-test-modal.is-open { display: flex; }

.rb-test-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,11,13,0.88);
    backdrop-filter: blur(3px);
}

.rb-test-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: var(--rb-dark-start, #111214);
    border: 1px solid rgba(246,194,80,0.25);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    overflow: hidden;
    animation: rbTestModalIn .22s ease;
}

@keyframes rbTestModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rb-test-modal-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
}

.rb-test-modal-frame iframe,
.rb-test-modal-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.rb-test-modal-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(17,18,20,0.75);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s, color .2s;
}

.rb-test-modal-close:hover {
    background: var(--rb-accent, #f6c250);
    border-color: var(--rb-accent, #f6c250);
    color: #111214;
    transform: scale(1.08);
}

body.rb-test-modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .rb-test-modal { padding: 10px; }
    .rb-test-modal-close { top: 6px; right: 6px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    /* Cap at 2 cols on tablet regardless of setting */
    .rb-test-cards,
    .rb-test-grid { grid-template-columns: repeat(min(var(--rb-cols, 3), 2), 1fr); }

    .rb-test-cards--carousel .rb-test-card {
        flex-basis: calc((100% - var(--rb-card-gap, 32px) * (min(var(--rb-cols, 3), 2) - 1)) / min(var(--rb-cols, 3), 2));
    }

    .rb-test-card-thumb { width: 190px; height: 142px; }

    .rb-test-heading { font-size: 26px; margin-bottom: 28px; }
    .rb-test-wrap { padding: 0 16px; }
}

@media (max-width: 640px) {
    .rb-test-dark         { padding: 36px 0 40px; }
    .rb-test-grid-section { padding: 32px 0 36px; }
    .rb-test-heading      { font-size: 22px; margin-bottom: 22px; }
    .rb-test-wrap         { padding: 0 16px; }
    .rb-test-cards        { --rb-card-gap: 14px; gap: 14px; }
    .rb-test-grid         { gap: 14px; }
}

@media (max-width: 480px) {
    .rb-test-cards,
    .rb-test-grid { grid-template-columns: 1fr !important; }

    .rb-test-cards--carousel .rb-test-card { flex-basis: 100%; }

    .rb-test-card-thumb { width: 170px; height: 127px; }

    .rb-test-cards-arrow--prev { left: 4px; }
    .rb-test-cards-arrow--next { right: 4px; }
}

/* ============================================================
   VIDEO PLAYLIST LAYOUT (layout="playlist")
   One main player + a horizontal scrollable thumbnail strip.
   Replaces the hand-coded per-page YouTube playlist embeds
   (main player facade + thumbnail strip) used on city landing
   pages, driven by rb_testimonial post data instead.
   ============================================================ */
/* Flex column all the way down (section > wrap > playlist widget > embed) so
   that when JS (RBMatchHeights) gives this section a taller min-height to
   line up with a Google Map next to it, the extra space grows the actual
   video player itself — not blank padding above/below it. */
.rb-test-playlist-section {
    background: var(--rb-dark-start, #111214);
    padding: 52px 0 56px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.rb-test-playlist-section .rb-test-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rb-test-playlist-section .rb-test-tagline,
.rb-test-playlist-section .rb-test-heading {
    text-align: center;
}

.rb-test-playlist {
    width: 100%;
    background: #0a0a0a;
    border-radius: 10px;
    box-sizing: border-box;
    flex: 1;
}

.rb-test-playlist-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    flex: 1 1 auto;
    min-height: 200px;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.rb-test-playlist-embed iframe,
.rb-test-playlist-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.rb-test-playlist-scroll {
    position: relative;
    padding: 12px 26px 0;
}

.rb-test-playlist-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.rb-test-playlist-strip::-webkit-scrollbar { display: none; }

.rb-test-playlist-card {
    flex: 0 0 140px;
    cursor: pointer;
    scroll-snap-align: start;
    border-radius: 6px;
    outline: none;
}

.rb-test-playlist-tw {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    background: #111;
    border: 2px solid transparent;
    transition: border-color .2s;
}

.rb-test-playlist-card.active .rb-test-playlist-tw,
.rb-test-playlist-card:hover .rb-test-playlist-tw {
    border-color: var(--rb-accent, #c9a227);
}

.rb-test-playlist-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rb-test-playlist-ov {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: 18px;
    opacity: 0;
    transition: opacity .15s;
}

.rb-test-playlist-card:hover .rb-test-playlist-ov,
.rb-test-playlist-card.active .rb-test-playlist-ov {
    opacity: 1;
}

.rb-test-playlist-num {
    position: absolute;
    bottom: 4px;
    right: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,.65);
    padding: 2px 5px;
    border-radius: 3px;
}

.rb-test-playlist-arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(10,10,10,.9);
    border: 1px solid #3a3a3a;
    color: #f0f0f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    transition: background .2s, border-color .2s, opacity .2s;
}

.rb-test-playlist-arr:hover {
    background: var(--rb-accent, #c9a227);
    border-color: var(--rb-accent, #c9a227);
    color: #000;
}

.rb-test-playlist-arr-l { left: 0; }
.rb-test-playlist-arr-r { right: 0; }
.rb-test-playlist-arr.is-hidden { opacity: 0; pointer-events: none; }

.rb-test-playlist-btn {
    display: table;
    margin: 16px auto 0;
    padding: 10px 28px;
    color: var(--rb-accent, #c9a227);
    background: #0a0a0a;
    border: 2px solid var(--rb-accent, #c9a227);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .5px;
    transition: background .2s, color .2s;
}

.rb-test-playlist-btn:hover {
    background: var(--rb-accent, #c9a227) !important;
    color: #000 !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .rb-test-playlist-card { flex: 0 0 110px; }
    .rb-test-playlist-scroll { padding: 10px 22px 0; }
}

/* ============================================================
   GOOGLE MAP (shortcode: [rb_google_map])
   A separate, standalone widget from the testimonials shortcodes.
   Loads the Maps iframe directly (no click-to-load step).
   ============================================================ */
.rb-map {
    width: 100%;
    background: #0a0a0a;
    border-radius: 10px;
    box-sizing: border-box;
}

.rb-map-media {
    position: relative;
    width: 100%;
    /* aspect-ratio gives it a sensible height when used standalone (no taller
       container to fill); flex: 1 1 auto lets it grow past that ratio when
       .rb-map ends up taller (e.g. JS-matched to a video player next to it)
       so the map itself gets bigger, not just letterboxed in extra black
       background. min-height is just a floor for very narrow columns. */
    aspect-ratio: 16 / 9;
    flex: 1 1 auto;
    min-height: 240px;
    border-radius: 10px;
    overflow: hidden;
    background: #e5e3df;
}

.rb-map--fixed-height .rb-map-media {
    aspect-ratio: auto;
    flex: none;
    min-height: 0;
    height: var(--rb-map-height, 400px);
}

.rb-map-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

/* Height matching with the video player, when both sit side by side, is done
   in JS (RBMatchHeights in rb-testimonials.js) rather than CSS — a builder
   like Divi can wrap either widget in different module types on different
   pages (Text, Code, etc.) with different nesting, so a CSS selector chain
   tied to a specific builder's wrapper classes is fragile. JS instead reads
   each widget's own rendered height directly, with no assumptions about what
   contains it, and re-syncs on resize so it stays responsive. These two
   rules just let the extra height (once JS sets it via min-height) show as
   more of the dark card rather than stretching the media box out of its
   aspect ratio. */
.rb-test-playlist,
.rb-map {
    display: flex;
    flex-direction: column;
}

.rb-map {
    justify-content: center;
}

/* ============================================================
   CAROUSEL FEATURES ([rb_carousel_features])
   Logo/badge strip — dark background, prev/next arrows, paged
   sliding track (same paging mechanic as the featured-cards
   carousel, just simpler: no dots, always-enabled wraparound).
   ============================================================ */
.rb-carousel-section {
    background: transparent;
    padding: 40px 0;
    box-sizing: border-box;
}

.rb-carousel-wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
}

.rb-carousel-viewport {
    position: relative;
    overflow: hidden;
}

.rb-carousel-track {
    display: flex;
    align-items: center;
    gap: 48px;
    transition: transform .4s ease;
}

.rb-carousel-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    text-decoration: none;
}

.rb-carousel-item img {
    max-height: 100%;
    max-width: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* image_size="full" — no width cap, each logo fills 100% of its slot
   (still bounded by .rb-carousel-item's own fixed height, and object-fit
   keeps the image's own aspect ratio rather than stretching it). */
.rb-carousel-section--full .rb-carousel-item img {
    max-width: none;
    width: 100%;
    height: 100%;
}

.rb-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border-radius: 50%;
    /* The section background is transparent (shows whatever the page
       puts behind it), so — same as the other arrow chips in this
       plugin (.rb-test-cards-arrow, .rb-test-playlist-arr) — this needs
       its own self-contained dark backdrop to stay readable regardless
       of what's behind it, rather than relying on a known dark section. */
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(17,18,20,0.7);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s, transform .2s;
}

.rb-carousel-arrow:hover {
    background: rgba(201,168,76,0.35);
    border-color: var(--rb-accent, #f6c250);
    transform: translateY(-2px);
}

/* Arrows are now direct children of .rb-carousel-wrap (not
   .rb-carousel-viewport) specifically so the viewport's overflow:hidden
   — needed to clip the sliding track — doesn't also clip the arrows
   themselves whenever they're positioned outside the track's own box.
   Centred within the wrap's side padding (its gutter). */
.rb-carousel-arrow--prev { left: 12px; }
.rb-carousel-arrow--next { right: 12px; }

/* arrows="no" variant (see rb_carousel_shortcode). Desktop: no arrows —
   every logo shrinks to fit a single row instead of paging. Mobile
   override below switches this to a single-logo auto-rotating slide
   (JS: RBFeatureCarousel._startAutoRotate) AND brings the arrows back,
   same "hidden on desktop, always on for touch" split as the featured
   video cards row (.rb-test-cards-arrow) — shrinking logos further at
   that width would make them unreadable, so touch users page manually
   instead. */
.rb-carousel-wrap--no-arrows {
    padding: 0;
}

.rb-carousel-wrap--no-arrows .rb-carousel-arrow {
    display: none;
}

.rb-carousel-wrap--no-arrows .rb-carousel-item {
    flex: 1 1 0;
    min-width: 0;
}

.rb-carousel-wrap--no-arrows .rb-carousel-item img {
    max-width: 100%;
}

@media (max-width: 640px) {
    .rb-carousel-arrow--prev { left: 4px; }
    .rb-carousel-arrow--next { right: 4px; }
    .rb-carousel-wrap { padding: 0 44px; }
    .rb-carousel-track { gap: 32px; }
    .rb-carousel-item { height: 80px; }
    .rb-carousel-item img { max-width: 180px; }

    /* No-arrows: switch from "shrink to fit a row" to "one logo at a
       time" — RBFeatureCarousel drives the auto-rotation, this just
       makes each item occupy the full slide width for it to slide
       between. No gap needed since only one item is ever visible.
       Padding falls back to the base .rb-carousel-wrap rule above
       (same 44px gutter) now that the arrows need room again. */
    .rb-carousel-wrap--no-arrows .rb-carousel-arrow {
        display: flex;
    }
    .rb-carousel-wrap--no-arrows .rb-carousel-track { gap: 0; }
    .rb-carousel-wrap--no-arrows .rb-carousel-item {
        flex: 0 0 100%;
        min-width: 0;
    }
}

/* ============================================================
   Restored photo-testimonial section (testimonials-new page).
   These columns carry a background-image but no actual module
   inside them (that's how the old page did it — the "photo" is
   just the column's own background), so Divi's builder marks
   them empty and its own dynamic CSS ships a blanket rule that
   HIDES every empty column outright:
       .et_pb_column_empty{display:none}
   That's the actual reason the photos disappeared — not a cache
   fluke as first suspected. Un-hide these two specifically and
   set the background-image directly here (rather than relying on
   Divi regenerating its own per-page background-image rule, which
   is also inconsistent). Selectors use the stable module_class
   values set on the section/row/column shortcode attributes
   ("smart-testimonials-photos"/"photo-right"/"photo-left"/
   "testimonials-page-photo"), not Divi's auto-generated
   per-render IDs, so this keeps working regardless of what Divi's
   cache does elsewhere on the page.
   ============================================================ */
.smart-testimonials-photos .testimonials-page-photo.et_pb_column_empty {
    display: block !important;
    min-height: 320px;
}

.smart-testimonials-photos .photo-right .testimonials-page-photo {
    background-image: url('/wp-content/uploads/2019/12/testimonial-Andre-1.jpg') !important;
    background-size: contain !important;
    background-position: right top !important;
    background-repeat: no-repeat !important;
}

.smart-testimonials-photos .photo-left .testimonials-page-photo {
    background-image: url('/wp-content/uploads/2019/12/testimonial-Mike.jpg') !important;
    background-size: contain !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 767px) {
    .smart-testimonials-photos .testimonials-page-photo.et_pb_column_empty {
        min-height: 220px;
    }
    .smart-testimonials-photos .photo-right .testimonials-page-photo,
    .smart-testimonials-photos .photo-left .testimonials-page-photo {
        background-position: top center !important;
    }
}