/* ==========================================================================
   Shared testimonial / video-review section.

   ONE SOURCE OF TRUTH. This component's CSS is duplicated in the project:
   partials/home/testimonials-assets.blade.php serves the packages,
   how-it-works, portfolio and service-detail pages, while index.blade.php
   carries its own inline copy for the homepage. Rather than edit both (and
   let them drift again), this single file is loaded from the layout <head>
   and is specific enough to win over either copy, so every page that renders
   partials.home.testimonials-stack picks the design up from here.

   Both existing copies top out at three plain classes and use no !important,
   so prefixing with `section.customreviews` (which adds a type selector) is
   enough — there is no !important anywhere below.

   Presentation only: no markup data, video URLs, customer fields, carousel
   options or playback handlers are involved.

   Tokens are the ones the navbar/hero/services/packages already use:
     accent   var(--primary-color) #0073FC
     dark     #0A0C0D ground, linear-gradient(rgb(32,37,42), rgb(25,29,33))
     light    #F3F6F8 ground, #0A0D0F / #626B75 ink
   ========================================================================== */

section.customreviews.bgblack {
    /* index.blade.php has `section + section + section + section + section {
       background: #1a1a1a !important }` — a positional selector that catches
       this section. It is shared, so it is out-weighted rather than edited. */
    background: #0A0C0D !important;
}

/* ---- Heading block ------------------------------------------------------ */
section.customreviews .tk-reviews-head {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 6px 0 0;
}

section.customreviews .tk-reviews-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 6px 13px;
    border: 1px solid rgba(0, 115, 252, 0.22);
    border-radius: 999px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 3px 7px rgba(0, 0, 0, 0.45);
    color: var(--primary-color, #0073FC);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

section.customreviews .tk-reviews-label svg {
    width: 13px;
    height: 13px;
}

section.customreviews .tk-reviews-head .main-title {
    margin: 0;
    color: #F3F5F7;
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

/* thin accent rule, heading width only */
section.customreviews .tk-reviews-rule {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 14px;
    background: linear-gradient(90deg, transparent, rgba(0, 115, 252, 0.55) 18%, rgba(0, 115, 252, 0.55) 82%, transparent);
}

/* ---- Hover sparkles ------------------------------------------------------ */
/* 12 nodes at fixed positions supplied by the markup; never interactive. */
section.customreviews .tk-reviews-sparkles {
    position: absolute;
    inset: -26px -14px 0;
    pointer-events: none;
    z-index: 2;
}

section.customreviews .tk-reviews-sparkles i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 7px;
    height: 7px;
    opacity: 0;
    pointer-events: none;
    border-radius: 1px;
    transform: scale(var(--s)) translateY(4px);
    background:
        radial-gradient(closest-side, var(--primary-color, #0073FC) 0 38%, transparent 40%),
        conic-gradient(from 0deg,
            transparent 0 6%, rgba(102, 172, 255, 0.95) 12%, transparent 18% 31%,
            rgba(102, 172, 255, 0.95) 37%, transparent 43% 56%,
            rgba(102, 172, 255, 0.95) 62%, transparent 68% 81%,
            rgba(102, 172, 255, 0.95) 87%, transparent 93%);
}

section.customreviews .tk-reviews-head:hover .tk-reviews-sparkles i,
section.customreviews .tk-reviews-head:focus-within .tk-reviews-sparkles i {
    animation: tkSparkle 1.5s ease-in-out var(--d) infinite;
}

@keyframes tkSparkle {
    0%   { opacity: 0;   transform: scale(calc(var(--s) * 0.5)) translateY(6px)   rotate(-8deg); }
    28%  { opacity: 0.9; transform: scale(var(--s))             translateY(0)     rotate(4deg); }
    62%  { opacity: 0.6; transform: scale(calc(var(--s) * 0.9)) translateY(-5px)  rotate(10deg); }
    100% { opacity: 0;   transform: scale(calc(var(--s) * 0.6)) translateY(-11px) rotate(16deg); }
}

@media (prefers-reduced-motion: reduce) {
    section.customreviews .tk-reviews-head:hover .tk-reviews-sparkles i,
    section.customreviews .tk-reviews-head:focus-within .tk-reviews-sparkles i {
        animation: none;
        opacity: 0.7;
        transform: scale(var(--s));
    }
}

/* ---- Slider shell -------------------------------------------------------- */
section.customreviews .homepage-testimonials-slider::before {
    background: radial-gradient(circle, rgba(0, 115, 252, 0.1), transparent 68%);
}

/* ---- Cards --------------------------------------------------------------- */
section.customreviews .homepage-testimonials-slider .swiper-slide .outertest.homepage-testimonial-card {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 6px 16px rgba(0, 0, 0, 0.42);
}

section.customreviews .homepage-testimonials-slider .swiper-slide .outertest.homepage-testimonial-card::before {
    background: radial-gradient(circle at var(--review-pointer-x) var(--review-pointer-y), rgba(0, 115, 252, 0.16), transparent 54%);
}

/* Every card reads as present, as in the reference — the old .46 opacity and
   .92 scale are what made only the middle card feel real. */
section.customreviews .homepage-testimonials-slider .swiper-slide:not(.swiper-slide-active) .homepage-testimonial-card {
    opacity: 0.88;
    transform: scale(1);
}

section.customreviews .homepage-testimonials-slider .swiper-slide-active .homepage-testimonial-card {
    opacity: 1;
    border-color: rgba(0, 115, 252, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 10px 22px rgba(0, 0, 0, 0.5);
    transform: scale(1);
}

/* Hover: elevation and a blue edge only — nothing that resizes the slide. */
section.customreviews .homepage-testimonials-slider .swiper-slide .outertest.homepage-testimonial-card:hover {
    border-color: rgba(0, 115, 252, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 10px 24px rgba(0, 0, 0, 0.5);
}

section.customreviews .homepage-testimonials-slider .swiper-slide:not(.swiper-slide-active) .homepage-testimonial-video video {
    transform: scale(1);
}

section.customreviews .homepage-testimonials-slider .homepage-testimonial-video {
    width: 100%;
    border-radius: 12px;
}

section.customreviews .homepage-testimonial-card .content.text-center {
    padding: 10px 10px 0;
}

/* ---- Play button --------------------------------------------------------- */
section.customreviews .homepage-testimonial-video .homepage-testimonial-play {
    width: 56px;
    height: 56px;
    background: rgba(8, 10, 12, 0.6);
}

section.customreviews .homepage-testimonial-video .homepage-testimonial-play::before {
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 14px;
}

/* ---- Verified badge (was green) ------------------------------------------ */
section.customreviews .homepage-testimonial-card .testimonial-verified-badge {
    padding: 4px 9px;
    border: 1px solid rgba(0, 115, 252, 0.24);
    border-radius: 7px;
    background: rgba(0, 115, 252, 0.1);
    color: var(--primary-color, #0073FC);
    font-size: 9.5px;
}

/* ---- Customer details ---------------------------------------------------- */
section.customreviews .homepage-testimonial-card .section-header.details {
    padding: 12px 14px 14px;
    text-align: left;
}

section.customreviews .homepage-testimonial-card .test_head {
    color: #F3F5F7;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}

section.customreviews .homepage-testimonial-card .name {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12.5px;
}

section.customreviews .homepage-testimonial-card .position,
section.customreviews .homepage-testimonial-card .address {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11.5px;
    line-height: 1.5;
}

/* ---- Arrows -------------------------------------------------------------- */
section.customreviews .homepage-testimonials-slider .testimonial-swiper-btn {
    top: 50%;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 3px 7px rgba(0, 0, 0, 0.5);
    color: var(--primary-color, #0073FC);
}

section.customreviews .homepage-testimonials-slider .testimonial-swiper-btn:hover {
    background: linear-gradient(rgb(40, 46, 52), rgb(31, 36, 41));
    transform: translateY(-50%);
}

/* ==========================================================================
   LIGHT THEME — the site's existing data-tk-theme mechanism, no new state.
   ========================================================================== */
html[data-tk-theme="light"] section.customreviews.bgblack {
    background: #F3F6F8 !important;
}

html[data-tk-theme="light"] section.customreviews .tk-reviews-head .main-title {
    color: #0A0D0F;
}

html[data-tk-theme="light"] section.customreviews .tk-reviews-label {
    border-color: rgba(0, 115, 252, 0.25);
    background: linear-gradient(#FFFFFF, #F6F8FA);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 5px rgba(15, 23, 42, 0.07);
}

/* The light card stays light on hover — surface, border and shadow only. */
html[data-tk-theme="light"] section.customreviews .homepage-testimonials-slider .swiper-slide .outertest.homepage-testimonial-card {
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(#FFFFFF, #F8FAFB);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(15, 23, 42, 0.07);
}

html[data-tk-theme="light"] section.customreviews .homepage-testimonials-slider .swiper-slide .outertest.homepage-testimonial-card:hover,
html[data-tk-theme="light"] section.customreviews .homepage-testimonials-slider .swiper-slide-active .homepage-testimonial-card {
    border-color: rgba(0, 115, 252, 0.3);
    background: linear-gradient(#FFFFFF, #F4F7F9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(15, 23, 42, 0.11);
}

/* The card's lower information block (name / role / location) is painted by a
   legacy rule carried in the page-injected stylesheet:
       .details, .section-header { background: rgba(0, 0, 0, 0.32) }
   That is a 32% black scrim designed for the dark card. On the light card it
   sat on top of the white gradient as a grey wash and dragged the already-dark
   ink (#0A0D0F / #626B75) down with it. Clearing it lets the card's own
   light surface show through — no new background is invented, and the video
   thumbnail above it is untouched (no filter, no opacity, no overlay). */
html[data-tk-theme="light"] .homepage-testimonial-card .section-header.details,
html[data-tk-theme="light"] .homepage-testimonial-card .section-header {
    background-color: transparent;
}

/* Non-active slides are dimmed to 0.88 for the dark design. On a light ground
   that same dim reads as a grey wash over the whole card — video, name, role
   and location all lose contrast, which is what made these cards look
   disabled. In light mode the active card is already distinguished by its own
   blue border and deeper shadow (the rule directly above), so the carousel
   still shows which slide is active without dimming any card's content.
   Opacity only: no filter, no overlay, no change to the media or to the
   carousel behaviour. */
html[data-tk-theme="light"] section.customreviews .homepage-testimonials-slider .swiper-slide:not(.swiper-slide-active) .homepage-testimonial-card {
    opacity: 1;
}

html[data-tk-theme="light"] section.customreviews .homepage-testimonial-card .test_head {
    color: #0A0D0F;
}

html[data-tk-theme="light"] section.customreviews .homepage-testimonial-card .name {
    color: #4A535D;
}

html[data-tk-theme="light"] section.customreviews .homepage-testimonial-card .position,
html[data-tk-theme="light"] section.customreviews .homepage-testimonial-card .address {
    color: #626B75;
}

html[data-tk-theme="light"] section.customreviews .homepage-testimonials-slider .testimonial-swiper-btn {
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(#FFFFFF, #F6F8FA);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 8px rgba(15, 23, 42, 0.1);
}

html[data-tk-theme="light"] section.customreviews .homepage-testimonials-slider .testimonial-swiper-btn:hover {
    background: linear-gradient(#FFFFFF, #EEF2F5);
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
    section.customreviews .tk-reviews-sparkles {
        inset: -18px -6px 0;
        overflow: hidden;
    }
}

@media (max-width: 575px) {
    section.customreviews .homepage-testimonials-slider .testimonial-swiper-btn {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================================
   Header row + four-up track (reference composition).
   ========================================================================== */

/* Badge LEFT, heading immediately to its right, both on one row and left
   aligned. The old markup put the badge in its own centred row. */
section.customreviews .tk-reviews-headrow {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-bottom: 30px;
    text-align: left;
}

section.customreviews .tk-reviews-headrow .tk-reviews-label {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* Heading + rule + sparkles as one block that takes the remaining width. */
section.customreviews .tk-reviews-headrow .tk-reviews-head {
    position: relative;
    flex: 1 1 auto;
    display: block;
    min-width: 0;
    padding: 0;
}

section.customreviews .tk-reviews-headrow .tk-reviews-head .main-title {
    text-align: left;
    font-size: clamp(26px, 3.2vw, 44px);
}

section.customreviews .tk-reviews-headrow .tk-reviews-rule {
    margin-top: 10px;
    background: linear-gradient(90deg, rgba(0, 115, 252, 0.55), rgba(0, 115, 252, 0.22) 72%, transparent);
}

section.customreviews .tk-reviews-headrow .tk-reviews-sparkles {
    inset: -22px 0 auto 0;
    height: 100%;
}

/* ---- Track: exactly four whole cards ------------------------------------ */
/* The slider's own 54px side padding is what the arrows sit in; the track
   inside it is the viewport, and with centeredSlides off Swiper divides it
   into four equal columns with the 24px spaceBetween. Nothing is clipped. */
section.customreviews .homepage-testimonials-slider {
    padding: 4px 56px;
}

/* The video was capped at 320px and given a 9/16 box, so the card could not
   use its column. It now fills the column and the card sets the height. */
section.customreviews .homepage-testimonials-slider .homepage-testimonial-video {
    width: 100%;
    max-width: none;
    aspect-ratio: 3 / 4.15;
    margin: 0;
    border-radius: 14px;
}

section.customreviews .homepage-testimonials-slider .swiper-slide .outertest.homepage-testimonial-card {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

section.customreviews .homepage-testimonial-card .content.text-center {
    padding: 0;
}

/* ---- Verified chip: was a full-width bar splitting the card ------------- */
section.customreviews .homepage-testimonial-card .section-header.details {
    position: relative;
    padding: 11px 6px 4px;
}

section.customreviews .homepage-testimonial-card .testimonial-verified-badge {
    position: absolute;
    top: -34px;
    left: 8px;
    z-index: 2;
    margin: 0;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(8, 10, 12, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 8.5px;
}

/* ---- Arrows sit in the padding, never over the cards -------------------- */
section.customreviews .homepage-testimonials-slider .testimonial-swiper-prev { left: 4px; }
section.customreviews .homepage-testimonials-slider .testimonial-swiper-next { right: 4px; }

@media (max-width: 991px) {
    section.customreviews .tk-reviews-headrow {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    section.customreviews .homepage-testimonials-slider {
        padding: 4px 46px;
    }
}

/* The four cards should occupy most of the usable desktop width. Widening
   this section's own container (not the global one) takes the cards from
   ~229px to ~300px each. */
@media (min-width: 1400px) {
    section.customreviews > .container {
        max-width: 1400px;
    }
}

/* ==========================================================================
   ROOT-CAUSE FIX: viewport width == exactly four slides.

   .homepage-testimonials-slider is Swiper's viewport and carries
   overflow:hidden, which clips at its BORDER box. Any padding on it is
   therefore inside the visible area, so the next slide bleeds through as a
   sliver — that is what produced [partial][1][2][3][partial]. The side room
   for the arrows now belongs to .tk-reviews-carousel, and the viewport has
   no padding at all, so Swiper's four columns fill it exactly.
   ========================================================================== */
section.customreviews .tk-reviews-carousel {
    position: relative;
    /* room for the arrows, outside the clipped viewport */
    padding: 0 58px;
}

section.customreviews .homepage-testimonials-slider {
    padding: 0;
    overflow: hidden;
}

/* Arrows belong to the wrapper, so they never take width from the cards. */
section.customreviews .tk-reviews-carousel .testimonial-swiper-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 3px 7px rgba(0, 0, 0, 0.5);
    color: var(--primary-color, #0073FC);
}

section.customreviews .tk-reviews-carousel .testimonial-swiper-prev { left: 4px; }
section.customreviews .tk-reviews-carousel .testimonial-swiper-next { right: 4px; }

section.customreviews .tk-reviews-carousel .testimonial-swiper-btn:hover {
    background: linear-gradient(rgb(40, 46, 52), rgb(31, 36, 41));
    transform: translateY(-50%);
}

html[data-tk-theme="light"] section.customreviews .tk-reviews-carousel .testimonial-swiper-btn {
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(#FFFFFF, #F6F8FA);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 8px rgba(15, 23, 42, 0.1);
}

html[data-tk-theme="light"] section.customreviews .tk-reviews-carousel .testimonial-swiper-btn:hover {
    background: linear-gradient(#FFFFFF, #EEF2F5);
}

/* Cards calibrated back toward the reference (they had grown too large). */
section.customreviews .homepage-testimonials-slider .homepage-testimonial-video {
    aspect-ratio: 3 / 4;
}

/* tighter band between the header and the cards */
section.customreviews .tk-reviews-headrow { margin-bottom: 22px; }

/* ---- Badge: more breathing room, larger icon ---------------------------- */
section.customreviews .tk-reviews-headrow .tk-reviews-label {
    gap: 9px;
    padding: 9px 15px;
    border-radius: 10px;
    font-size: 11.5px;
    letter-spacing: 0.1em;
}

section.customreviews .tk-reviews-headrow .tk-reviews-label svg {
    width: 16px;
    height: 16px;
}

/* ---- Sparkles at reference scale ---------------------------------------- */
/* Varied sizes and three shapes rather than uniform 7px dots. Size comes
   from --s (set per particle in the markup) multiplied up here. */
section.customreviews .tk-reviews-sparkles i {
    width: calc(var(--s) * 15px);
    height: calc(var(--s) * 15px);
}

/* every 3rd particle is a plain dot, every 4th a diamond — the rest keep the
   four-point spark, so the group reads as mixed shapes */
section.customreviews .tk-reviews-sparkles i:nth-child(3n) {
    background: radial-gradient(closest-side, rgba(102, 172, 255, 0.95) 0 62%, transparent 64%);
    border-radius: 50%;
}

section.customreviews .tk-reviews-sparkles i:nth-child(4n) {
    background: var(--primary-color, #0073FC);
    border-radius: 2px;
    rotate: 45deg;
}

/* ==========================================================================
   FACEBOOK + TRUSTPILOT REVIEWS — LIGHT THEME ONLY.

   Colour work, nothing else. Every rule below is gated on
   html[data-tk-theme="light"], so the dark design is byte-for-byte
   untouched: no layout, sizing, spacing, radius, carousel, marquee or
   animation property appears anywhere in this block.

   Third-party branding is deliberately left alone — the Facebook blue
   chip, the Trustpilot green stars, the gold star fallback and the
   per-platform avatar/badge colours all keep their own identity. Only our
   own surfaces, type and CTA accents change.

   Scoped to the two review shells (.facebook-trustpilot-shell and
   .trustpilot-section) so nothing else on the page is reached.
   ========================================================================== */

html[data-tk-theme="light"] section.trustpilot-section {
    /* index.blade.php has `section + section + section + section + section {
       background: #1a1a1a !important }`, a positional selector that catches
       this one too. It is shared, so it is out-weighted rather than edited. */
    background: #F3F6F8 !important;
}

/* Shell: the panel that groups each platform's heading + row. */
html[data-tk-theme="light"] .trustpilot-shell,
html[data-tk-theme="light"] .facebook-trustpilot-shell {
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(#FFFFFF, #F8FAFB);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* ---- Headings and summaries --------------------------------------------- */
html[data-tk-theme="light"] .trustpilot-title,
html[data-tk-theme="light"] .facebook-review-title {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .trustpilot-kicker,
html[data-tk-theme="light"] .facebook-review-kicker {
    color: #626B75;
}

html[data-tk-theme="light"] .trustpilot-summary,
html[data-tk-theme="light"] .facebook-review-summary {
    border-color: rgba(15, 23, 42, 0.08);
    background: #FFFFFF;
    color: #0A0D0F;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

html[data-tk-theme="light"] .facebook-review-summary:hover {
    border-color: rgba(0, 115, 252, 0.35);
    color: #0A0D0F;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

html[data-tk-theme="light"] .trustpilot-score-value,
html[data-tk-theme="light"] .facebook-review-score {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .trustpilot-score-meta,
html[data-tk-theme="light"] .trustpilot-score-meta strong,
html[data-tk-theme="light"] .facebook-review-summary-caption {
    color: #626B75;
}

/* ---- Review cards -------------------------------------------------------- */
/* Light surface normally, a shade cooler on hover — never a white flash. */
html[data-tk-theme="light"] .trustpilot-card {
    border-color: rgba(15, 23, 42, 0.08);
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

html[data-tk-theme="light"] .trustpilot-card:hover {
    border-color: rgba(0, 115, 252, 0.28);
    background: #F7F9FB;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
}

html[data-tk-theme="light"] .trustpilot-card-title {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .trustpilot-card-body {
    color: #4A535D;
}

html[data-tk-theme="light"] .trustpilot-card-brand {
    color: #626B75;
}

html[data-tk-theme="light"] .trustpilot-author {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .trustpilot-meta {
    color: #8A929B;
}

/* ---- Footer / source notes (easy to miss, white on white otherwise) ------ */
html[data-tk-theme="light"] .trustpilot-footer,
html[data-tk-theme="light"] .trustpilot-note {
    color: #626B75;
}

/* .trustpilot-link is the FILLED CTA button ("View Facebook Reviews" /
   "View Trustpilot Profile"), not a text link. An earlier revision coloured
   it blue here, which put blue text on the blue Facebook pill and on the
   green Trustpilot pill — unreadable. Its label is white in both themes;
   only .trustpilot-see-more is a real inline text link. */
html[data-tk-theme="light"] .trustpilot-see-more {
    color: var(--primary-color, #0073FC);
}

html[data-tk-theme="light"] .trustpilot-link,
html[data-tk-theme="light"] .trustpilot-link:hover,
html[data-tk-theme="light"] .trustpilot-link:focus,
html[data-tk-theme="light"] .trustpilot-link:active,
html[data-tk-theme="light"] .trustpilot-link:visited,
html[data-tk-theme="light"] .trustpilot-link * {
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

/* Any review text that inherits white from a shell wrapper. */
html[data-tk-theme="light"] .facebook-trustpilot-shell,
html[data-tk-theme="light"] .trustpilot-topbar,
html[data-tk-theme="light"] .trustpilot-score-line,
html[data-tk-theme="light"] .trustpilot-card-head,
html[data-tk-theme="light"] .trustpilot-card-footer {
    color: #0A0D0F;
}

/* ---- Google/Trustpilot embed cards in the same rows --------------------- */
html[data-tk-theme="light"] .googleReviewSlider .ti-review-item {
    border-color: rgba(15, 23, 42, 0.08);
    background: #FFFFFF;
    color: #0A0D0F;
}

html[data-tk-theme="light"] .googleReviewSlider .ti-review-content,
html[data-tk-theme="light"] .googleReviewSlider .ti-review-content * {
    color: #4A535D;
}

/* NOT overridden on purpose — third-party identity:
     .facebook-review-icon            Facebook blue chip
     .trustpilot-stars                Trustpilot green
     .ti-star-fallback                gold stars
     .ti-platform-badge-*             per-platform brand colours
     .ti-profile-initials-*           per-platform avatar colours
     .trustpilot-avatar               generated avatar colours          */

/* ---- Remaining light-mode contrast ------------------------------------- */
/* .centerbuttons carries `color: #cccccc4a` (a ~29%-alpha grey) from the
   layout, which is invisible on the light ground. It holds the
   "Rated 5/5 based on Customer Reviews" line and the Facebook / Trustpilot
   links beneath the Facebook row. The links set their own blue; only the
   surrounding text needed a readable neutral. Dark mode is untouched. */
html[data-tk-theme="light"] .centerbuttons {
    color: #626B75;
}

html[data-tk-theme="light"] .centerbuttons a {
    color: var(--primary-color, #0073FC);
}

/* card date/location line was borderline at #8A929B */
html[data-tk-theme="light"] .trustpilot-meta {
    color: #626B75;
}

/* the "5" in "Rated 5/5 …" carries its own white */
html[data-tk-theme="light"] .centerbuttons strong,
html[data-tk-theme="light"] .trustpilot-footer strong {
    color: #0A0D0F;
}

/* Why the .centerbuttons rule above was not enough on its own: the
   "Rated 5/5 based on Customer Reviews" <span> carried an inline
   style="color: white", and an inline declaration beats any stylesheet rule
   without !important — so the line stayed white-on-white in light mode no
   matter what the parent said. The attribute was removed from
   partials/home/review-platforms.blade.php.

   It was doing a real job in dark mode, though: .centerbuttons inherits
   `color: #cccccc4a` (~29% alpha grey) from the layout, and the inline white
   was what made the line legible there. So the colour is restored here per
   theme instead of inline. Both rules target the <span> directly, because a
   colour set on the child always beats one inherited from .centerbuttons. */
.centerbuttons span {
    color: #FFFFFF;
}

html[data-tk-theme="light"] .centerbuttons span {
    color: #626B75;
}