/* --------------------------------------------------
   Fonts
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@600;700&display=swap');

/* --------------------------------------------------
   Base
-------------------------------------------------- */
body {
  font-family: 'Roboto', sans-serif;
  color: #333333;
}

/* --------------------------------------------------
   Página /download
-------------------------------------------------- */
.descargar2 { margin: 30px 0; }

/* Header do download */
.header-descargar {
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:20px; width:80%; margin:0 auto 2em auto;
  background-color:#f0f4f8; border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}
.header-descargar img { width:60px; height:60px; border-radius:12px; }
.header-descargar h1 {
  font-family:'Montserrat',sans-serif; font-size:26px; color:#333; text-align:center; margin:0;
}

/* Bloco de redirecionamento */
.redirect {
  background:#fff; border:2px solid #e0e7ff; text-align:center;
  padding:25px; margin-bottom:2em; border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,0.05);
}
.redirect h2 { font-size:20px; color:#4a5568; margin-bottom:15px; }
.redirect .loading img { width:100px; height:100px; }
.redirect .notload a { color:#3182ce; text-decoration:underline; font-weight:600; }

/* Área central do redirect */
.redirect-container { text-align:center; margin-top:-50px; }
#message-container p {
  font-size:14px; color:#e11d48; font-weight:bold; margin-top:15px; text-align:center;
}
#countdown { font-weight:700; margin:8px 0; }

/* Link de fallback do redirect */
#redirect-link {
  display:inline-block; margin-top:10px; font-size:12px;
  color:#007BFF; text-align:center;
}
#redirect-link:after {
  content:' (caso o botão não funcione)'; font-size:12px;
}

/* Botão cancelar / continuar */
#cancel-redirect {
  background-color:#FF6F61; color:#fff; padding:10px 20px;
  border:none; border-radius:5px; font-size:14px; font-weight:bold;
  cursor:pointer; text-transform:uppercase; transition:all .3s ease;
}
#cancel-redirect:hover { background-color:#FF9671; color:#fff; }
#cancel-redirect.continue-download { background-color:#4CAF50; color:#fff; }
#cancel-redirect.continue-download:hover { background-color:#45A049; }

/* --------------------------------------------------
   Bloco "provider" (cartão antigo)
-------------------------------------------------- */
.provider_stats_wrapper {
  display:flex; flex-direction:column; align-items:center;
  padding:20px; flex:1 1 300px; max-width:500px; margin:20px 0;
}
.provider_stats {
  width:100%; max-width:500px; border:1px solid #e2e8f0; border-radius:8px;
  font-size:18px; box-shadow:0 4px 12px rgba(0,0,0,0.05);
  background-color:#fff; padding:20px;
}
.provider_logo { display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.provider_logo img { width:60px; height:60px; border-radius:12px; }
.provider_logo a {
  font-family:'Montserrat',sans-serif; font-size:22px; color:#1a202c; text-decoration:none;
}
.provider_logo a:hover { color:#3182ce; text-decoration:underline; }

.provider_overall {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  font-size:18px; background-color:#f5f5f5; padding:15px 0; border-radius:5px; margin-bottom:15px;
}
.provider_overall .oos { font-weight:700; font-size:20px; color:#2d3748; }

.star-rating { display:flex; align-items:center; }
.star-rating .star { font-size:16px; color:gold; margin-right:2px; position:relative; }
.star-rating .star.empty { color:#ccc; }
.star-rating .star.half::before {
  content:'★'; position:absolute; left:0; top:0; width:50%; overflow:hidden; color:gold;
}

.download-count { font-size:16px; color:#4a5568; margin-top:5px; }

.provider_stats_row {
  width:100%; display:flex; justify-content:space-between; margin:10px 0;
}
.provider_stats_row_left div,
.provider_stats_row_right div { font-size:16px; color:#4a5568; }

.clear { clear:both; }

/* CTA container (cartão antigo) */
.provider_visit {
  border-top:1px solid #e5e5e5; display:flex; justify-content:center; gap:15px;
  flex-wrap:wrap; padding:15px 0;
}

/* Botões padrão (cartão antigo) */
a.visit {
  display:flex; align-items:center; justify-content:center;
  padding:12px 20px; background:linear-gradient(90deg,#6a11cb 0%,#2575fc 100%);
  color:#fff !important; border-radius:8px; font-size:18px; font-weight:600;
  margin:10px; text-align:center; text-decoration:none;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  transition:transform .2s ease, box-shadow .3s ease;
  animation:none;
}
a.visit:hover { transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,0.15); }

/* Ícones de plataforma */
.platform-icon { width:24px; height:24px; margin-right:10px; }

/* --------------------------------------------------
   NOVO CARD DO PLUGIN (tema selecionável)
   Estrutura: .cl-card … + .cl-variant-*
-------------------------------------------------- */
.cl-card{
  --radius:16px;
  --border:#e6e7ea;
  --text:#2b2f38;
  --muted:#6b7280;
  --bg:#fff;
  --cta:#111827;        /* default */
  --cta-hover:#0b1220;  /* default hover */
  --tint:#f3f4f6;       /* caixas claras / rating bg */
  --tint-strong:#fafafa;

  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 4px 18px rgba(21,24,31,.06);
  /* FIX: não cortar lateral/sombra interna */
  overflow:visible;

  /* layout */
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(min-content, auto);
  box-sizing:border-box;
  max-width:100%;
}

/* Header do card */
.cl-header{
  display:grid; grid-template-columns:56px 1fr auto;
  align-items:center; gap:12px;
  padding:16px 16px 12px 16px;
  background:#fff; border-bottom:1px solid #f0f1f4;
  box-sizing:border-box; max-width:100%;
}
.cl-logo{ width:56px; height:56px; border-radius:12px; object-fit:cover; }
.cl-title{
  font-weight:700; line-height:1.25; color:#111827;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cl-rating{
  font-weight:700; color:#111827; background:var(--tint);
  border-radius:12px; padding:8px 12px; display:flex; align-items:center; gap:6px;
}
.cl-star{ color:#f59e0b; }

/* Specs em grade */
.cl-specs{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:0; border-bottom:1px solid #f0f1f4;
  box-sizing:border-box; max-width:100%;
}
.cl-spec{
  padding:14px 16px; display:flex; flex-direction:column; gap:4px;
  border-right:1px solid #f0f1f4; min-width:0;
  box-sizing:border-box;
}
.cl-spec:nth-child(4n){ border-right:none; }
.cl-k{ font-size:12px; color:#6b7280; }
.cl-v{ font-weight:700; color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* CTAs */
.cl-ctas{
  display:grid; gap:12px; padding:16px; background:#fff;
  grid-column:1 / -1; width:100%;
  box-sizing:border-box; max-width:100%;
  overflow:visible; /* garante sombra/lado do botão visíveis */
}
.cl-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; border-radius:12px; font-weight:700; text-decoration:none;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
  width:100%; max-width:100%; min-width:0; box-sizing:border-box; margin:0;
}
.cl-btn:active{ transform:translateY(1px); }
.cl-btn-primary{
  background:var(--cta); color:#fff; box-shadow:0 6px 16px rgba(17,24,39,.25);
}

/* Rodapé */
/* Nota de rodapé do card */
.cl-footnote{
    text-align:center;
    font-size:.875rem;
    opacity:.85;
    margin-top:10px;
    line-height:1.4;
}

/* -----------------------------
   VARIANT: DEFAULT
------------------------------*/
.cl-variant-default .cl-btn-primary{
  background:var(--cta); color:#fff; box-shadow:0 6px 16px rgba(17,24,39,.25);
}
.cl-variant-default .cl-btn-primary:hover{ background:var(--cta-hover); }
.cl-variant-default a.visit{
  background:linear-gradient(90deg,#6a11cb 0%,#2575fc 100%) !important;
}

/* -----------------------------
   VARIANT: SOFT RED
------------------------------*/
.cl-variant-soft-red{
  --cta:#d71920;
  --cta-hover:#b31218;
  --tint:#fff1f2;
  --tint-strong:#fff7f7;
}
.cl-variant-soft-red .cl-btn-primary{
  background:var(--cta); color:#fff; box-shadow:0 6px 16px rgba(215,25,32,.25);
}
.cl-variant-soft-red .cl-btn-primary:hover{ background:var(--cta-hover); }
.cl-variant-soft-red a.visit{
  background:linear-gradient(90deg, var(--cta) 0%, var(--cta-hover) 100%) !important;
}

/* -----------------------------
   VARIANT: SOFT BLUE
------------------------------*/
.cl-variant-soft-blue{
  --cta:#2563eb;
  --cta-hover:#1d4ed8;
  --tint:#eff6ff;
  --tint-strong:#f8fbff;
}
.cl-variant-soft-blue .cl-btn-primary{
  background:var(--cta); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.25);
}
.cl-variant-soft-blue .cl-btn-primary:hover{ background:var(--cta-hover); }
.cl-variant-soft-blue a.visit{
  background:linear-gradient(90deg,#1e3a8a 0%,#2563eb 100%) !important;
}

/* -----------------------------
   VARIANT: SOFT GREEN
------------------------------*/
.cl-variant-soft-green{
  --cta:#10b981;
  --cta-hover:#059669;
  --tint:#ecfdf5;
  --tint-strong:#f6fef9;
}
.cl-variant-soft-green .cl-btn-primary{
  background:var(--cta); color:#fff; box-shadow:0 6px 16px rgba(16,185,129,.25);
}
.cl-variant-soft-green .cl-btn-primary:hover{ background:var(--cta-hover); }
.cl-variant-soft-green a.visit{
  background:linear-gradient(90deg,#22c55e 0%,#16a34a 100%) !important;
}

/* --------------------------------------------------
   Responsivo do novo card
-------------------------------------------------- */
@media (min-width: 640px){
  .cl-ctas{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .cl-header{ grid-template-columns:48px 1fr; grid-template-rows:auto auto; }
  .cl-logo{ width:48px; height:48px; border-radius:10px; }
  .cl-title{ grid-column:2 / -1; }
  .cl-rating{ grid-column:1 / -1; margin-top:8px; justify-self:start; }
  .cl-specs{ grid-template-columns:1fr 1fr; }
  .cl-spec:nth-child(2n){ border-right:none; }
}

/* --------------------------------------------------
   Botões adicionais (opcional)
-------------------------------------------------- */
.button-container-cli{
  display:flex; flex-wrap:wrap; justify-content:space-around; gap:10px;
  max-width:600px; margin:20px auto;
}
.gradient-button-cli{
  background:linear-gradient(90deg,#52c234 0%,#0f9b0f 100%);
  color:#fff; text-decoration:none; padding:10px 20px; font-size:16px; font-weight:bold;
  border-radius:5px; display:flex; align-items:center; justify-content:space-between; flex:1 1 45%;
}
.gradient-button-cli i.arrow-right{
  border:solid #fff; border-width:0 3px 3px 0; display:inline-block; padding:3px; margin-left:10px; transform:rotate(-45deg);
}
.gradient-button-cli span{ flex-grow:1; }

/* --------------------------------------------------
   Inputs / Acessibilidade
-------------------------------------------------- */
input.error { border:2px solid #e53e3e; background-color:#fff5f5; }
input:focus {
  border:2px solid #3182ce; outline:none; box-shadow:0 0 8px rgba(49,130,206,0.5);
}
a.visit:focus-visible, button:focus-visible {
  outline:2px dashed #3182ce; outline-offset:2px;
}
a.visit:active, button:active {
  transform:scale(0.98); box-shadow:0 3px 6px rgba(0,0,0,0.1);
}

/* --------------------------------------------------
   Responsividade geral
-------------------------------------------------- */
@media (max-width: 900px){
  .header-descargar{ width:90%; }
  .provider_stats_row{ flex-direction:column; align-items:center; }
}
@media (max-width: 768px){
  #cancel-redirect{ width:100%; max-width:300px; margin:10px auto; display:block; text-align:center; }
  .redirect-container p{ text-align:center; font-size:14px; }
  #downloadTitle{ font-size:18px; text-align:center; }
  #downloadThumb{ display:block; margin:10px auto; max-width:80%; }
  .provider_stats_wrapper{ margin:20px 0; padding:10px; box-sizing:border-box; width:100%; }
}
@media (max-width: 600px){
  .provider_stats_row{ flex-direction:column; width:100%; }
  a.visit{ flex:1 1 100%; justify-content:center; }
  .header-descargar{ flex-direction:column; gap:15px; width:100%; }
  .header-descargar img{ width:50px; height:50px; }
  .header-descargar h1{ font-size:22px; text-align:center; }
}
@media (max-width: 480px){
  .provider_stats_row{ padding:10px; font-size:14px; }
  .header-descargar h1{ font-size:18px; }
}
@media only screen and (max-width: 768px){
  .redirect-container{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .redirect-container h1{ font-size:18px; margin-bottom:10px; }
  .redirect-container p{ font-size:14px; margin-bottom:10px; }
  #cancel-redirect{ width:auto; margin:15px 0; padding:10px 15px; }
  #message-container{ font-size:14px; }
  #redirect-link{ font-size:14px; }
}

/* --------------------------------------------------
   Botões de loja (imagens)
-------------------------------------------------- */
.loja-botoes-wrap{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.loja-botoes-wrap a{ display:block; }
.loja-botoes-wrap img{
  max-width:180px; height:auto; transition:transform .2s ease;
}
.loja-botoes-wrap img:hover{ transform:scale(1.05); }
@media (max-width: 360px){
  .loja-botoes-wrap img{ max-width:140px; }
}
.loja-botoes-wrap .visit{
  background:transparent !important; padding:0 !important;
}

/* --------------------------------------------------
   Compatibilidade com o cartão clássico dentro do novo
-------------------------------------------------- */
.cl-card .provider_visit{ display:block; width:100%; clear:both; }
.cl-card .provider_visit .visit{ width:100%; max-width:420px; }

/* --- Fix: botões do card ficando opacos em alguns temas --- */
.cl-card .cl-ctas{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

/* remove opacidade herdada/efeitos do tema */
.cl-card .cl-btn,
.cl-card .cl-btn-primary{
  opacity:1 !important;
  filter:none !important;
  pointer-events:auto;
}

/* garante contraste (ajuste a cor se usar variants por CSS) */
.cl-card .cl-btn-primary{
  color:#fff !important;
}
.cl-card .cl-btn-primary:visited{
  color:#fff !important;
}