/* MMC Reviews Marquee Styles */
.mmc-rm { --mmc-rm-gap: 18px; --mmc-rm-radius: 16px; --mmc-rm-card-bg: #fff; --mmc-rm-card-fg:#111; --mmc-rm-muted:#666; --mmc-rm-star:#FFB703; --mmc-rm-accent-1:#8a2be2; --mmc-rm-accent-2:#ff007a; }
.mmc-rm-title { margin-bottom: 14px; font-weight: 700; color:#111; }

/* Background gradient, with subtle vignette */
.mmc-rm-container { position: relative; display: grid; gap: 18px; }
.mmc-rm-container::before { content:""; position:absolute; inset:-30% -10% -20% -10%; background: none; z-index:-1; pointer-events: none; }

.mmc-rm-viewport { position: relative; overflow: hidden; padding: 0; z-index: 1; }
.mmc-rm-track { position: relative; display: flex; gap: var(--mmc-rm-gap); align-items: stretch; will-change: transform; z-index: 1; list-style: none; margin: 0; padding: 0; }
.mmc-rm-track--clone { position: absolute; top: 0; left: 0; }
.mmc-rm-track > li { list-style: none; }

/* Card */
.mmc-rm-card { min-width: 320px; max-width: 400px; flex: 0 0 auto; background: var(--mmc-rm-card-bg); border-radius: var(--mmc-rm-radius); box-shadow: none; padding: 14px 16px; color: var(--mmc-rm-card-fg); border: 1px solid rgba(0,0,0,.06); text-align: left;}

/* Top stars - fat rounded star icons via SVG */
.mmc-rm-stars { display:flex; align-items:center; gap: 6px; font-size: 0; line-height: 1; }
.mmc-rm-star { display:inline-block; width: 18px; height: 18px; background: url('../img/star-rounded-full.svg') center/contain no-repeat; font-size: 0; text-indent: 0; }
.mmc-rm-star--empty { background-image: url('../img/star-rounded-empty.svg'); }

/* Body */
.mmc-rm-body { padding: 10px 0 12px;}
.mmc-rm-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mmc-rm-card-fg); opacity: .9; }

/* Footer (author + meta) */
.mmc-rm-footer { display:flex; align-items:center; gap: 10px; }
.mmc-rm-avatar { width: 54px; height: auto; border-radius: 4px; object-fit: cover; box-shadow: none; border: 1px solid grey; }
.mmc-rm-meta { display:flex; flex-direction:column; line-height:1.4;}
.mmc-rm-author { font-weight: 700; color: var(--mmc-rm-card-fg); font-size: 14px; }
.mmc-rm-role { color: var(--mmc-rm-muted); font-size: 12px; }

/* Shadow utility classes (kept but neutral by default) */
.mmc-rm--shadow-none .mmc-rm-card { box-shadow: none; }
.mmc-rm--shadow-light .mmc-rm-card { box-shadow: none; }
.mmc-rm--shadow-medium .mmc-rm-card { box-shadow: none; }
.mmc-rm--shadow-strong .mmc-rm-card { box-shadow: none; }

/* Adaptive theme classes from settings */
.mmc-rm.mmc-rm--theme-adaptive { --mmc-rm-card-bg: #fff; --mmc-rm-card-fg:#111; --mmc-rm-muted:#666; }
@media (prefers-color-scheme: dark) {
  .mmc-rm.mmc-rm--theme-adaptive { --mmc-rm-card-bg: rgba(28,28,30,0.78); --mmc-rm-card-fg:#EDEDED; --mmc-rm-muted:#A0A0A0; }
}
.mmc-rm.mmc-rm--theme-light { --mmc-rm-card-bg: #fff; --mmc-rm-card-fg:#111; --mmc-rm-muted:#666; }

/* Responsive */
@media (max-width: 479px) {
  .mmc-rm-card { min-width: 90vw; max-width: 90vw; }
  .mmc-rm { --mmc-rm-gap: 12px; }
  .mmc-rm-container { gap: 12px; }
}
@media (min-width: 480px) and (max-width: 1023px) {
  .mmc-rm-card { min-width: 320px; max-width: 380px; }
  .mmc-rm { --mmc-rm-gap: 16px; }
}
@media (min-width: 1024px) {
  .mmc-rm-card { min-width: 360px; max-width: 400px; }
  .mmc-rm { --mmc-rm-gap: 18px; }
}

/* Empty state */
.mmc-rm-empty { color: #888; font-size: 14px; }
.mmc-rm-load-more{margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--mmc-rm-border,rgba(0,0,0,.12));background:var(--mmc-rm-surface,#fff);color:var(--mmc-rm-text,#111);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:background .2s,border-color .2s,transform .06s; position: relative; z-index: 9999; pointer-events: auto;}
.mmc-rm--theme-adaptive .mmc-rm-load-more{background:color-mix(in oklab,var(--mmc-rm-surface,#111) 92%, #fff);color:var(--mmc-rm-text,#fafafa);border-color:rgba(255,255,255,.16)}
.mmc-rm-load-more:hover{transform:translateY(-1px)}
.mmc-rm-load-more.is-loading{opacity:.7;pointer-events:none}
/* Strong override: center and transparent text-style button */
button.mmc-rm-load-more, .mmc-rm-load-more {
  display: block;
  width: max-content;
  margin: 24px auto 0;
  padding: 0;
  border: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #424242;
  font-weight: 300;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  position: relative; /* for arrows positioning */
}

/* Ensure theme states don't re-introduce background */
.mmc-rm-load-more:hover,
.mmc-rm-load-more:focus,
.mmc-rm-load-more:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Semi-transparent animated multi-arrow under button: fall-down sequence */
.mmc-rm-load-more::before,
.mmc-rm-load-more::after {
  content: "↓"; /* single arrow glyph; multiple instances via staggered pseudo-elements */
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translate(-50%, -6px);
  line-height: 1;
  color: rgba(0,0,0,.45);
  opacity: 0; /* start invisible */
  pointer-events: none;
}
.mmc-rm-load-more::before {
  font-size: 18px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
  animation: mmc-arrow-fall 1.2s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: 0s;
}
.mmc-rm-load-more::after {
  font-size: 20px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
  animation: mmc-arrow-fall 1.2s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: .18s; /* stagger to feel multi-arrows */
}

/* Hide arrows while loading */
.mmc-rm-load-more.is-loading::before,
.mmc-rm-load-more.is-loading::after { opacity: 0; animation: none; }

/* Keyframes: start transparent, short pause, quick fall while fading in, disappear at end */
@keyframes mmc-arrow-fall {
  0%   { transform: translate(-50%, -6px); opacity: 0; }
  12%  { transform: translate(-50%, -6px); opacity: 0; } /* short pause */
  38%  { transform: translate(-50%, 12px); opacity: .7; }  /* quick fall + appear */
  39%  { transform: translate(-50%, 12px); opacity: 0; }   /* vanish instantly at end */
  100% { transform: translate(-50%, -6px); opacity: 0; }   /* reset above */
}

.mmc-rm-load-more:hover {
  color: #333;
  text-decoration-thickness: 2px;
  transform: translateY(-1px);
}

.mmc-rm-load-more:active {
  transform: translateY(0);
}

.mmc-rm-load-more.is-loading {
  opacity: 0.6;
  pointer-events: none;
  animation: loading-dots 1.5s ease-in-out infinite;
}

/* Text pulse animation */
@keyframes pulse-text {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Loading animation */
@keyframes loading-dots {
  0%, 20% { opacity: 0.6; }
  50% { opacity: 0.8; }
  80%, 100% { opacity: 0.6; }
}

/* New cards fade-in animation */
.mmc-rm-viewport.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Center the load more button container */
.mmc-rm {
  text-align: center;
}

.ac-btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid rgba(0,0,0,.18);background:transparent;color:#000000;font-weight:600;line-height:1;letter-spacing:.2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(0,0,0,.06);transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ac-btn::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-7px;width:62%;height:10px;background:radial-gradient(ellipse at center, rgba(0,0,0,.22), rgba(0,0,0,0) 70%);filter:blur(6px);opacity:.7;pointer-events:none}
.ac-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(0,0,0,.08)}
.ac-btn:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.08)}
.ac-btn:focus-visible{outline:2px solid rgba(0,0,0,.4);outline-offset:2px}
.ac-btn__symbol{font-weight:800;color:#000000;opacity:.9}

/* Disable old pseudo-element arrows under the button */
.mmc-rm-load-more::before,
.mmc-rm-load-more::after { content: none !important; animation: none !important; }

/* Chevron multi-arrows container under the button (user-requested style) */
.mmc-rm-arrows { 
  position: relative; 
  width: 64px; 
  height: 64px; 
  margin: 10px auto 0;
  text-align: -webkit-center;
  pointer-events: none; 
}
.mmc-rm-arrows span { 
  display: block; 
  width: 14px;
  border-radius: 4px 0px;
  height: 14px;
  border-bottom: 1px solid rgba(18, 6, 6, 0.55);
  border-right: 1px solid rgba(23, 7, 7, 0.95);
  transform: rotate(45deg); 
  margin: -8px; 
  animation: mmc-chevron-animate 2s infinite; 
}
.mmc-rm-arrows span:nth-child(2) { animation-delay: -0.2s; }
.mmc-rm-arrows span:nth-child(3) { animation-delay: -0.4s; }

/* Pause/hide when loading */
.mmc-rm-load-more.is-loading + .mmc-rm-arrows { opacity: 0; }

@keyframes mmc-chevron-animate { 
  0% { opacity: 0; transform: rotate(45deg) translate(0px, 0px); } 
  50% { opacity: 1; } 
  100% { opacity: 0; transform: rotate(45deg) translate(15px, 15px); } 
}
.mmc-rm-load-more:hover {
  color: #333;
  text-decoration-thickness: 2px;
  transform: translateY(-1px);
}

.mmc-rm-load-more:active {
  transform: translateY(0);
}

.mmc-rm-load-more.is-loading {
  opacity: 0.6;
  pointer-events: none;
  animation: loading-dots 1.5s ease-in-out infinite;
}

/* Text pulse animation */
@keyframes pulse-text {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Loading animation */
@keyframes loading-dots {
  0%, 20% { opacity: 0.6; }
  50% { opacity: 0.8; }
  80%, 100% { opacity: 0.6; }
}

/* New cards fade-in animation */
.mmc-rm-viewport.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Center the load more button container */
.mmc-rm {
  text-align: center;
}

.ac-btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid rgba(0,0,0,.18);background:transparent;color:#000000;font-weight:600;line-height:1;letter-spacing:.2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(0,0,0,.06);transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ac-btn::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-7px;width:62%;height:10px;background:radial-gradient(ellipse at center, rgba(0,0,0,.22), rgba(0,0,0,0) 70%);filter:blur(6px);opacity:.7;pointer-events:none}
.ac-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(0,0,0,.08)}
.ac-btn:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.08)}
.ac-btn:focus-visible{outline:2px solid rgba(0,0,0,.4);outline-offset:2px}
.ac-btn__symbol{font-weight:800;color:#000000;opacity:.9}
/* Mobile app-like UI refinements */
@media (max-width: 768px) {
  /* Global spacing and rounding */
  .mmc-rm { 
    --mmc-rm-gap: 12px; 
    --mmc-rm-radius: 14px; 
    padding-inline: 12px; /* keep content away from screen edges */
  }
  .mmc-rm-container { gap: 12px; }

  /* Title sizing */
  .mmc-rm-title { 
    font-size: 14px; 
    margin: 6px 0 12px; 
    letter-spacing: .2px; 
  }

  /* Card content sizing */
  .mmc-rm-card { padding: 10px 10px; border-radius: 10px; }
  .mmc-rm-stars { gap: 2px; }
  .mmc-rm-star { width: 10px; height: 10px; }
  .mmc-rm-body p { font-size: 12px; line-height: 1.2; }

  /* Footer (avatar/meta) */
  .mmc-rm-avatar { width: 44px; border-radius: 6px; }
  .mmc-rm-author { font-size: 12px; }
  .mmc-rm-role { font-size: 10px; }

}