/* ResultsAiX Testimonials — front-end styles. Scoped under .ap-* to avoid theme clashes. */

/* The `hidden` attribute is only display:none at user-agent weight, so ANY author
   rule that sets a display value on the same element beats it and the element
   stays on screen. .ap-float is display:flex and the widget ships it with a bare
   `hidden` attribute, so without this the floating popup renders as an empty box
   on page load and its close button does nothing at all.
   Declared ONCE here, before any component needs it, rather than per class:
   patching one class at a time is exactly why this fault kept coming back.
   Scoped to this plugin's own roots so it can never reach the host theme, and it
   matches the roots themselves as well as their descendants because .ap-float
   carries the attribute on the root element. */
.autoproof[hidden], .ap-collection[hidden], .ap-wall[hidden], .ap-form[hidden], .ap-float[hidden],
.autoproof [hidden], .ap-collection [hidden], .ap-wall [hidden], .ap-form [hidden], .ap-float [hidden] {
  display: none !important;
}

.ap-collection, .ap-wall, .ap-form, .ap-float {
  --ap-accent: #6c5ce7;
  --ap-cols: 3;
  --ap-card-bg: #ffffff;
  --ap-text: #1f2330;
  --ap-muted: #6b7280;
  --ap-border: #e8e8ef;
  --ap-shadow: 0 4px 18px rgba(20, 20, 50, .08);
  box-sizing: border-box;
}
.autoproof *, .ap-collection *, .ap-wall *, .ap-form *, .ap-float * { box-sizing: border-box; }

.ap-theme-dark {
  --ap-card-bg: #1c1f2b;
  --ap-text: #f2f3f8;
  --ap-muted: #a4abbd;
  --ap-border: #2c3040;
  --ap-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}

/* ── Card ─────────────────────────────────────────── */
.ap-card {
  background: var(--ap-card-bg);
  color: var(--ap-text);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius, 14px);
  padding: 22px;
  margin: 0;
  box-shadow: var(--ap-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ap-card-quote { margin: 0; padding: 0; border: 0; }
.ap-card-content { font-size: var(--ap-fs, 15px); line-height: 1.6; color: var(--ap-text); }
.ap-card-content p { margin: 0 0 8px; }
.ap-card-product {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--ap-accent);
  background: rgba(108, 92, 231, .09);
  border: 1px solid rgba(108, 92, 231, .25);
  background: color-mix(in srgb, var(--ap-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--ap-accent) 28%, transparent);
  border-radius: 999px; padding: 1px 9px; margin-top: 3px; align-self: flex-start;
}

.ap-card-foot { display: flex; align-items: center; gap: 12px; margin: 0; }
.ap-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex: 0 0 46px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ap-avatar-initial {
  background: var(--ap-accent); color: #fff; font-weight: 700; font-size: 18px;
}
/* Gravatar-with-initial-fallback wrapper: transparent to the flex layout, so the
   img and the hidden initial span lay out exactly like a bare avatar. */
.ap-avatar-fb { display: contents; }
.ap-card-meta { display: flex; flex-direction: column; line-height: 1.3; }
.ap-card-name { font-weight: 700; font-size: 14px; }
.ap-card-title { color: var(--ap-muted); font-size: 13px; }
.ap-card-date { color: var(--ap-muted); font-size: 12px; }

.ap-verified {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: #16a34a; margin-left: 4px;
}

/* ── Stars ────────────────────────────────────────── */
.ap-stars { display: inline-flex; gap: 2px; font-size: 16px; line-height: 1; }
.ap-star.ap-on { color: var(--ap-star, #f5a623); }
.ap-star.ap-off { color: #d6d8e0; }
.ap-theme-dark .ap-star.ap-off { color: #3a3f52; }

/* ── Media ────────────────────────────────────────── */
.ap-media { border-radius: 10px; overflow: hidden; }
.ap-media img, .ap-media video, .ap-media iframe {
  width: 100%; display: block; border: 0; border-radius: 10px;
}
.ap-media-video iframe, .ap-media-video video { aspect-ratio: 16 / 9; }

/* ── Layouts ──────────────────────────────────────── */
.ap-layout-grid .ap-track {
  display: grid;
  grid-template-columns: repeat(var(--ap-cols), 1fr);
  gap: 20px;
}
.ap-layout-list .ap-track { display: flex; flex-direction: column; gap: 16px; }
.ap-layout-list .ap-card { flex-direction: column; }

.ap-layout-masonry .ap-track {
  column-count: var(--ap-cols);
  column-gap: 20px;
}
.ap-layout-masonry .ap-card { break-inside: avoid; margin-bottom: 20px; display: inline-flex; width: 100%; }

/* Carousel / slider */
.ap-layout-carousel, .ap-layout-slider, .ap-layout-single { position: relative; }
.ap-layout-carousel .ap-track,
.ap-layout-slider .ap-track,
.ap-layout-single .ap-track {
  display: flex;
  align-items: flex-start; /* one tall slide must not stretch every other card */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.ap-layout-carousel .ap-track::-webkit-scrollbar,
.ap-layout-slider .ap-track::-webkit-scrollbar,
.ap-layout-single .ap-track::-webkit-scrollbar { display: none; }
.ap-layout-carousel .ap-card,
.ap-layout-slider .ap-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--ap-cols) - 1) * 20px) / var(--ap-cols));
}
.ap-layout-single .ap-card { scroll-snap-align: center; flex: 0 0 100%; }

.ap-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ap-accent); color: #fff; border: 0;
  font-size: 22px; line-height: 1; cursor: pointer; z-index: 2;
  box-shadow: var(--ap-shadow);
}
.ap-prev { left: -14px; }
.ap-next { right: -14px; }

/* Carousel pagination dots */
.ap-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.ap-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
  background: var(--ap-border, #d8d8e2); cursor: pointer;
  transition: transform .15s, background .15s; opacity: .7;
}
.ap-dot:hover { opacity: 1; }
.ap-dot-on { background: var(--ap-accent); opacity: 1; transform: scale(1.3); }

.ap-empty { padding: 24px; text-align: center; color: var(--ap-muted); }

/* Wall filter feedback */
.ap-wall-status { font-size: 13px; font-weight: 600; color: var(--ap-muted); margin: 4px 0 14px; }
.ap-wall-grid { transition: opacity .18s ease; }

@media (max-width: 900px) {
  .ap-layout-grid .ap-track { grid-template-columns: repeat(2, 1fr); }
  .ap-layout-masonry .ap-track { column-count: 2; }
  .ap-layout-carousel .ap-card, .ap-layout-slider .ap-card { flex-basis: 70%; }
}
@media (max-width: 600px) {
  .ap-layout-grid .ap-track { grid-template-columns: 1fr; }
  .ap-layout-masonry .ap-track { column-count: 1; }
  .ap-layout-carousel .ap-card, .ap-layout-slider .ap-card { flex-basis: 88%; }
  .ap-nav { display: none; }
}

/* ── Wall of Love ─────────────────────────────────── */
.ap-wall { --ap-accent: #6c5ce7; }
.ap-wall-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 22px;
}
.ap-wall-search, .ap-wall-product {
  padding: 10px 14px; border: 1px solid var(--ap-border); border-radius: 10px;
  background: var(--ap-card-bg); color: var(--ap-text); font-size: 14px;
}
.ap-wall-search { flex: 1; min-width: 200px; }
.ap-wall-ratings { display: flex; gap: 6px; }
.ap-filter {
  padding: 8px 14px; border: 1px solid var(--ap-border); background: var(--ap-card-bg);
  color: var(--ap-text); border-radius: 999px; cursor: pointer; font-size: 13px;
}
.ap-filter.ap-active { background: var(--ap-accent); color: #fff; border-color: var(--ap-accent); }
.ap-wall-grid {
  column-count: var(--ap-cols); column-gap: 20px;
}
.ap-wall-grid .ap-card { break-inside: avoid; margin-bottom: 20px; display: inline-flex; width: 100%; }
.ap-wall-empty { padding: 30px; text-align: center; color: var(--ap-muted); }
.ap-wall-more-wrap { text-align: center; margin: 8px 0 4px; }
.ap-wall-more {
  padding: 11px 24px; border: 1px solid var(--ap-accent); background: var(--ap-card-bg);
  color: var(--ap-accent); border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 700;
  font-family: inherit; line-height: 1.2; transition: background .15s ease, color .15s ease;
}
.ap-wall-more:hover, .ap-wall-more:focus-visible { background: var(--ap-accent); color: #fff; }
.ap-wall-more[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 900px) { .ap-wall-grid { column-count: 2; } }
@media (max-width: 600px) { .ap-wall-grid { column-count: 1; } }

/* ── Submission form ──────────────────────────────── */
.ap-form {
  width: var(--ap-form-width, 560px); max-width: 100%; box-sizing: border-box;
  background: var(--ap-card-bg); color: var(--ap-text);
  border: 1px solid var(--ap-border); border-radius: var(--ap-radius, 16px); padding: 26px;
  box-shadow: var(--ap-shadow);
}
/* The form's chosen font must reach the controls too (form elements do NOT
   inherit font-family by default), so the Font picker restyles everything. */
.ap-form, .ap-form input, .ap-form textarea, .ap-form select, .ap-form button { font-family: inherit; }
.ap-form-head { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.ap-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.ap-field label { font-weight: 600; font-size: 14px; }
.ap-field small { color: var(--ap-muted); font-weight: 400; }
.ap-field input[type=text], .ap-field input[type=email], .ap-field textarea, .ap-field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--ap-border);
  border-radius: 10px; font-size: 14px; background: #fff; color: #1f2330;
}
.ap-theme-dark .ap-field input, .ap-theme-dark .ap-field textarea { background: #12151f; color: #f2f3f8; }
.ap-req { color: #e11d48; }
.ap-field-consent label { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.ap-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.ap-rating-input { display: flex; gap: 4px; }
.ap-rate-star {
  background: none; border: 0; font-size: 28px; cursor: pointer; color: #d6d8e0; line-height: 1; padding: 0;
}
.ap-rate-star.ap-on, .ap-rate-star:hover { color: #f5a623; }
.ap-form-submit {
  background: var(--ap-accent); color: #fff; border: 0; border-radius: 10px;
  padding: 13px 22px; font-size: 15px; font-weight: 700; cursor: pointer; width: 100%;
}
.ap-form-submit:disabled { opacity: .6; cursor: default; }
.ap-form-msg { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.ap-form-msg.ap-ok { background: #dcfce7; color: #166534; }
.ap-form-msg.ap-err { background: #fee2e2; color: #991b1b; }
.ap-form-disabled { padding: 18px; color: var(--ap-muted); }

/* ═══ Display template SKINS (set via skin="" attr or Settings → default skin) ═══
   Each skin restyles the cards inside any collection/wall it's applied to. */
.ap-skin-clean .ap-card { border: none; box-shadow: 0 2px 10px rgba(20,20,50,.07); border-radius: 10px; }
.ap-skin-clean .ap-stars { font-size: 14px; }

.ap-skin-midnight { --ap-card-bg: #14172b; --ap-text: #eef0fb; --ap-muted: #9aa1c2; --ap-border: #262b4a; }
.ap-skin-midnight .ap-card { background: #14172b; color: #eef0fb; border-color: #262b4a; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ap-skin-midnight .ap-card-content, .ap-skin-midnight .ap-card-name { color: #eef0fb; }
.ap-skin-midnight .ap-card-title, .ap-skin-midnight .ap-card-date { color: #9aa1c2; }

.ap-skin-glass .ap-card { background: rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.65); box-shadow: 0 8px 32px rgba(30,20,80,.12); }

/* Light-card skins (glass/gradient/paper) keep a light card no matter the theme,
   so their text must stay dark — otherwise the Dark theme's near-white text lands
   on a near-white card and vanishes. */
.ap-skin-glass .ap-card, .ap-skin-glass .ap-card-content, .ap-skin-glass .ap-card-name, .ap-skin-glass .ap-headline,
.ap-skin-gradient .ap-card, .ap-skin-gradient .ap-card-content, .ap-skin-gradient .ap-card-name, .ap-skin-gradient .ap-headline,
.ap-skin-paper .ap-card, .ap-skin-paper .ap-card-content, .ap-skin-paper .ap-card-name, .ap-skin-paper .ap-headline { color: #1f2330; }
.ap-skin-glass .ap-card-title, .ap-skin-glass .ap-card-date,
.ap-skin-gradient .ap-card-title, .ap-skin-gradient .ap-card-date,
.ap-skin-paper .ap-card-title, .ap-skin-paper .ap-card-date { color: #555a6e; }
.ap-skin-glass .ap-star.ap-off, .ap-skin-gradient .ap-star.ap-off, .ap-skin-paper .ap-star.ap-off { color: #c9cde0; }

.ap-skin-gradient .ap-card { border: none; position: relative; background: #fff; }
.ap-skin-gradient .ap-card::before { content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 2px; background: linear-gradient(135deg, var(--ap-accent), #0ea5c9, #e0457a); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

.ap-skin-minimal .ap-card { border: none; box-shadow: none; background: transparent; border-left: 3px solid var(--ap-accent); border-radius: 0; padding: 14px 20px; }
.ap-skin-minimal .ap-avatar { display: none; }

.ap-skin-bold .ap-card { background: var(--ap-accent); color: #fff; border: none; box-shadow: 0 14px 36px rgba(108,92,231,.4); }
.ap-skin-bold .ap-card-content, .ap-skin-bold .ap-card-name, .ap-skin-bold .ap-headline { color: #fff; }
.ap-skin-bold .ap-card-title, .ap-skin-bold .ap-card-date { color: rgba(255,255,255,.75); }
.ap-skin-bold .ap-star.ap-off { color: rgba(255,255,255,.35); }
.ap-skin-bold .ap-verified { color: #b4ffd9; }

.ap-skin-paper .ap-card { background: #fffdf4; border: 1px solid #ece5cd; border-radius: 6px; box-shadow: 3px 4px 0 rgba(60,50,20,.12); font-family: Georgia, 'Times New Roman', serif; }
.ap-skin-paper .ap-card-content { font-style: italic; }

.ap-skin-neon { --ap-card-bg: #0c0e1d; }
.ap-skin-neon .ap-card { background: #0c0e1d; color: #e8ecff; border: 1px solid var(--ap-accent); box-shadow: 0 0 18px rgba(108,92,231,.45), inset 0 0 22px rgba(108,92,231,.08); }
.ap-skin-neon .ap-card-content, .ap-skin-neon .ap-card-name { color: #e8ecff; }
.ap-skin-neon .ap-card-title, .ap-skin-neon .ap-card-date { color: #8f96bd; }
.ap-skin-neon .ap-headline { text-shadow: 0 0 14px rgba(108,92,231,.8); }

.ap-skin-royal .ap-card { background: linear-gradient(180deg, #fffdf7, #fdf6e3); border: 1px solid #e3c878; border-radius: 16px; box-shadow: 0 10px 28px rgba(160,120,20,.16); }
.ap-skin-royal .ap-stars .ap-on { color: #c9a227; }
.ap-skin-royal .ap-card-name { color: #6b4e00; }

.ap-skin-sunset .ap-card { background: linear-gradient(160deg, #fff7ed, #ffeef2); border: 1px solid #ffd9b3; }
.ap-skin-sunset .ap-headline { color: #ea580c; }
.ap-skin-sunset .ap-avatar-initial { background: linear-gradient(135deg, #f0932b, #e0457a); }

/* ── Results / proof: headline + gallery + lightbox ── */
.ap-headline { font-size: 18px; font-weight: 800; color: var(--ap-accent); line-height: 1.25; margin: 2px 0 6px; }
.ap-card-result .ap-headline { font-size: 20px; }
.ap-card-result .ap-card-content { font-size: 14px; color: var(--ap-muted); }
.ap-shot { display: block; cursor: zoom-in; }
.ap-shot img { display: block; width: 100%; max-height: 340px; object-fit: cover; object-position: top; border-radius: 10px; }
.ap-media-image { overflow: hidden; border-radius: 10px; }
.ap-card-result { padding-top: 14px; }
.ap-kind-jv .ap-headline { color: var(--ap-accent); }
.ap-layout-gallery .ap-track { column-count: var(--ap-cols); column-gap: 18px; display: block; }
.ap-layout-gallery .ap-card { break-inside: avoid; margin-bottom: 18px; display: inline-block; width: 100%; }
.ap-layout-gallery .ap-media { margin: 0 0 10px; }
@media (max-width: 900px) { .ap-layout-gallery .ap-track { column-count: 2; } }
@media (max-width: 600px) { .ap-layout-gallery .ap-track { column-count: 1; } }
.ap-lightbox { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10,10,25,.88); cursor: zoom-out; }
.ap-lightbox.ap-open { display: flex; }
.ap-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ap-lightbox-close { position: fixed; top: 18px; right: 24px; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; background: none; border: 0; }

/* Gift reward shown on the thank-you screen */
.ap-gift-box { margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: linear-gradient(135deg, rgba(184,134,11,.12), rgba(108,92,231,.12)); border: 1px solid rgba(184,134,11,.3); }
.ap-gift-title { font-size: 17px; font-weight: 800; }
.ap-gift-msg { font-size: 14px; margin-top: 4px; color: var(--ap-text); }
.ap-gift-coupon { margin-top: 8px; font-size: 14px; }
.ap-gift-coupon strong { background: #fff; border: 1px dashed var(--ap-accent); border-radius: 6px; padding: 2px 8px; letter-spacing: 1px; }
.ap-gift-btn { display: inline-block; margin-top: 10px; background: var(--ap-accent); color: #fff; font-weight: 700; padding: 10px 18px; border-radius: 10px; text-decoration: none; }
.ap-gift-btn:hover { filter: brightness(1.06); }

/* ── Floating popup ───────────────────────────────── */
.ap-float {
  position: fixed; z-index: 99990; max-width: 330px; width: calc(100% - 40px);
  background: var(--ap-card-bg); color: var(--ap-text);
  border: 1px solid var(--ap-border); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 10px 40px rgba(20,20,50,.18);
  display: flex; gap: 12px; align-items: flex-start;
  animation: ap-pop .4s ease;
}
.ap-float-bottom-left  { bottom: 20px; left: 20px; }
.ap-float-bottom-right { bottom: 20px; right: 20px; }
.ap-float-top-left     { top: 20px; left: 20px; }
.ap-float-top-right    { top: 20px; right: 20px; }
.ap-float .ap-avatar { width: 40px; height: 40px; flex-basis: 40px; }
.ap-float-body { font-size: 13px; line-height: 1.45; }
.ap-float-name { font-weight: 700; }
.ap-float-text { color: var(--ap-muted); }
.ap-float-close {
  position: absolute; top: 6px; right: 8px; background: none; border: 0;
  font-size: 16px; color: var(--ap-muted); cursor: pointer; line-height: 1;
}
@keyframes ap-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* AI summary block ([autoproof_summary]) */
.ap-summary {
  --ap-accent: #6c5ce7;
  max-width: 760px; margin: 24px auto; padding: 26px 30px;
  background: var(--ap-card-bg, #fff); border: 1px solid var(--ap-border, #e8e8ef);
  border-radius: 16px; box-shadow: var(--ap-shadow, 0 4px 18px rgba(20,20,50,.08));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ap-text, #1f2330); text-align: center;
}
.ap-summary-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.ap-summary-stars { color: #f5a623; font-size: 22px; letter-spacing: 2px; }
.ap-summary-stat { font-size: 14px; font-weight: 600; color: var(--ap-muted, #6b7280); }
.ap-summary-headline { font-size: 22px; font-weight: 800; margin: 6px 0 14px; line-height: 1.3; color: var(--ap-text, #1f2330); }
.ap-summary-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ap-summary-points li {
  background: rgba(108,92,231,.08); color: var(--ap-accent, #6c5ce7);
  border: 1px solid rgba(108,92,231,.2); border-radius: 999px;
  padding: 7px 15px; font-size: 13.5px; font-weight: 600;
}
.ap-theme-dark .ap-summary-points li { background: rgba(124,108,247,.16); border-color: rgba(124,108,247,.35); color: #c7bdff; }