/* ===== MMC Comments — Paleta Coins Selector (escopo .mmc-scope) =====
   Tokens: --cs-panel:#0E0E0E; --cs-text:#E7EDF7; --cs-muted:#9FB0C8; --cs-accent:#FF6A00; --cs-border:#343434;
   Utilitários: chips #242424; ativo #202020; rail #0F141D; label #CDCDCD; placeholder #6E7E96
   Focus: outline #96B4FF / border #3B5AC5
*/

.mmc-scope{
  --cs-panel:#0E0E0E;
  --cs-text:#E7EDF7;
  --cs-muted:#9FB0C8;
  --cs-accent:#FF6A00;
  --cs-border:#343434;

  --mmc-chip:#242424;
  --mmc-active:#202020;
  --mmc-rail:#0F141D;
  --mmc-label:#CDCDCD;
  --mmc-placeholder:#6E7E96;

  --mmc-focus:#96B4FF;
  --mmc-focus-border:#3B5AC5;

  --mmc-gap:14px;

  color:var(--cs-text);
}
.mmc-actions{padding-top: 10px;}
/* ===== Títulos / containers ===== */
.mmc-title{ 
  font-size: clamp(22px,2.4vw,30px);
  margin: 0 0 16px;
  line-height: 1.2;
  color: var(--cs-text);
}
.mmc-wrap, .mmc-preview{
  margin: 24px auto;
  max-width: 1080px;
  padding: 0 12px;
}

/* ===== Form ===== */
.mmc-form{
  background: var(--cs-panel);
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.mmc-form label{ 
  display:block; margin: 0 0 6px; font-weight: 600; color: var(--mmc-label);
}
.mmc-form input[type="text"],
.mmc-form textarea{
  width: 100%;
  background: var(--mmc-chip);
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.mmc-form input::placeholder,
.mmc-form textarea::placeholder{ color: var(--mmc-placeholder); }
.mmc-form input:focus,
.mmc-form textarea:focus{
  outline:2px solid var(--mmc-focus);
  outline-offset: 2px;
  border-color: var(--mmc-focus-border);
}
.mmc-form__row{ margin-bottom: 12px; }

/* ===== Estrelas (input) ===== */
.mmc-stars-input{
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 6px;
}
.mmc-stars-input input{ display:none; }
.mmc-stars-input label{
  font-size: 28px;
  cursor: pointer;
  color: #5b5e67;
  transition: transform .15s ease, filter .15s ease, color .15s ease;
  will-change: transform, filter;
}
.mmc-stars-input input:checked ~ label,
.mmc-stars-input label:hover,
.mmc-stars-input label:hover ~ label{
  color: var(--cs-accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--cs-accent) 60%, transparent);
  transform: scale(1.07);
}

/* ===== Botões ===== */
.mmc-btn{
  display:inline-block;
  padding: 11px 16px;
  background: var(--cs-accent);
  color:#0e0e0e;
  border:0;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transition: filter .15s ease, transform .08s ease;
}
.mmc-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.mmc-btn:active{ transform: translateY(0); }
.mmc-btn--ghost{
  background: transparent;
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
}
.mmc-btn--ghost:hover{ background: var(--cs-accent); color:#0e0e0e; border-color: var(--cs-accent); }
.mmc-form__msg{ margin-top: 10px; min-height: 22px; }

/* ===== Lista / Cards (página completa) ===== */
.mmc-list, .mmc-grid{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: var(--mmc-gap);
}
.mmc-card{
  grid-column: span 12;
  background: var(--cs-panel);
  color: var(--cs-text);
  border:1px solid var(--cs-border);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
@media (min-width:640px){
  .mmc-card{ grid-column: span 6; }
}
@media (min-width:960px){
  .mmc-card{ grid-column: span 4; }
}
.mmc-card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:6px;
}
.mmc-card__name{ font-weight:700; color: var(--cs-text); }
.mmc-card__date{ color: var(--mmc-label); font-size: 13px; }
.mmc-card__stars{
  display: inline-flex;
  gap: 4px;
  margin: 2px 0 8px;
  line-height: 1;
}
.mmc-card__stars .mmc-star{ font-size: 18px; color: #5b5e67; }
.mmc-card__stars .mmc-star.is-on{
  color: var(--cs-accent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cs-accent) 45%, transparent));
  transform: translateY(-0.5px);
}
.mmc-card__content p{ margin: 0; color: var(--cs-text); }
.mmc-empty{ color: var(--cs-muted); }

/* ===== Paginação (página completa) ===== */
.mmc-loadmore{
  margin: 16px auto 0;
  display:block;
  padding: 10px 14px;
  background: var(--mmc-active);
  color: var(--cs-text);
  border:1px solid var(--cs-border);
  border-radius:12px;
  cursor:pointer;
  transition: filter .15s ease, transform .08s ease;
}
.mmc-loadmore:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.mmc-loadmore:active{ transform: translateY(0); }
.mmc-loadmore[disabled]{ opacity:.6; cursor: not-allowed; }

/* ===== Prévia (shortcode) ===== */
.mmc-preview{
  background: linear-gradient(180deg, color-mix(in srgb, var(--cs-panel) 60%, transparent), color-mix(in srgb, var(--cs-panel) 20%, transparent));
  border: 1px solid var(--cs-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
}

/* Abas */
.mmc-tabs{
  display:flex; gap:8px; margin-bottom:14px;
  background: var(--mmc-chip);
  border:1px solid var(--cs-border);
  padding:6px;
  border-radius: 999px;
  width: max-content;
}
.mmc-tab{
  background: transparent; 
  color: var(--cs-muted); 
  border:0;
  border-radius: 999px; 
  padding:8px 14px; 
  cursor:pointer;
  transition: background .15s ease, color .15s ease, transform .08s ease;
}
.mmc-tab:focus{
  outline: 2px solid var(--mmc-focus);
  outline-offset: 2px;
}
.mmc-tab.is-active{ 
        font-weight: 600;
  background: var(--cs-accent); 
  color:#0e0e0e; 
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.mmc-tabpanel[hidden]{ display:none; }

/* ===== Carrosséis empilhados ===== */
.mmc-carousels{
  display:flex;
  flex-direction:column;
  gap: var(--mmc-gap);
}
.mmc-carousel{ overflow:hidden; border-radius:14px; }

/* Aumenta especificidade para evitar override do tema */
.mmc-scope .mmc-carousel__track{
  display:flex !important;
  gap: var(--mmc-gap);
  will-change: transform;
  transform: translateX(0);
}
.mmc-scope .mmc-carousel__slide{
  flex: 0 0 auto !important;
  width: 100%;
}

/* Visibilidade por breakpoint: mobile 1, tablet 2, desktop 3 */
@media (min-width:960px){
  .mmc-scope .mmc-carousel__slide{
    width: calc((100% - (var(--mmc-gap) * 2)) / 3) !important;
  }
}
@media (min-width:640px) and (max-width:959.98px){
  .mmc-scope .mmc-carousel__slide{
    width: calc((100% - var(--mmc-gap)) / 2) !important;
  }
}
/* mobile: 1 por vez (100%) */

/* Ajuste do card dentro do slide */
.mmc-scope .mmc-carousel__slide .mmc-card{
  width: 100%;
  grid-column: initial !important; /* ignora regras de grid fora do carrossel */
}

/* ===== Ajustes de mobile (tamanho/legibilidade) ===== */
@media (max-width:639.98px){
  .mmc-card{ padding: 12px; border-radius: 12px; }
  .mmc-card__head{ gap:10px; }
  .mmc-card__date{ font-size: 12px; }
  .mmc-card__stars .mmc-star{ font-size: 16px; }
  .mmc-card__content p{ font-size: clamp(13px, 3.8vw, 15px); line-height: 1.4; }
}

/* ===== Acessibilidade ===== */
.mmc-scope a:focus,
.mmc-scope button:focus,
.mmc-scope input:focus,
.mmc-scope textarea:focus{
  outline:2px solid var(--mmc-focus);
  outline-offset:2px;
  border-color: var(--mmc-focus-border);
}
/* ==== FIXES 2025-10-21 =========================================
   1) Truncamento a 2 linhas (somente na prévia da home)
   2) Estilo do input[type="email"] igual ao "Seu nome"
   =============================================================== */

/* 1) Truncar comentários em 2 linhas só no shortcode da home */
.mmc-preview .mmc-card__content,
.mmc-preview .mmc-card__content p{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* suporte futuro */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(1.4em * 2); /* altura ~2 linhas */
}

/* 2) Dar o mesmo visual do "Seu nome" ao campo de e-mail */
.mmc-form input[type="email"]{
  width: 100%;
  background: var(--mmc-chip);
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.mmc-form input[type="email"]:focus{
  outline: 2px solid var(--mmc-focus);
  outline-offset: 2px;
  border-color: var(--mmc-focus-border);
}