/* block-style.css */

/* 1. Wrapper do bloco */
.wp-block-mrb-redirect-buttons .mrb-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;          /* espaçamento aumentado */
  margin: 1.5em 0;
}

/* 2. Botões básicos */
.wp-block-mrb-redirect-buttons .mrb-button {
  display: block !important;
  width: 100% !important;
  padding: 1rem !important;
  text-align: left;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0.25em !important;
  font-family: Arial, sans-serif !important;
  font-weight: 600 !important;
  position: relative !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  overflow: hidden;
}

/* 2.1. Seta circular à direita */
.wp-block-mrb-redirect-buttons .mrb-button::after {
  content: '›' !important;
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-block !important;
  width: 1.5em !important;
  height: 1.5em !important;
  line-height: 1.5em !important;
  text-align: center !important;
  background: rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
  color: inherit !important;
  transition: transform 0.2s ease !important;
}

/* 3. Hover / foco */
.wp-block-mrb-redirect-buttons .mrb-button:hover,
.wp-block-mrb-redirect-buttons .mrb-button:focus {
  filter: brightness(0.9) !important;
}
.wp-block-mrb-redirect-buttons .mrb-button:hover::after,
.wp-block-mrb-redirect-buttons .mrb-button:focus::after {
  transform: translate(5px, -50%) !important;
}

/* 4. Mobile: reduz padding e seta */
@media screen and (max-width: 600px) {
  .wp-block-mrb-redirect-buttons .mrb-button {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }
  .wp-block-mrb-redirect-buttons .mrb-button::after {
    right: 0.75rem !important;
    width: 1.3em !important;
    height: 1.3em !important;
    line-height: 1.3em !important;
  }
}

/* 5. Nota (ainda mais discreta) */
.wp-block-mrb-redirect-buttons .mrb-note {
  font-size: 0.5rem !important;
  margin-top: 0.25em !important;
  font-style: italic !important;
  color: var(--wp--preset--color-muted, #666) !important;
  text-align: center !important;
}

/* 6. Variantes de estilo */

/* 6.1 Primary (padrão) */
.wp-block-mrb-redirect-buttons.mrb-variant-primary .mrb-button {
  background-color: var(--wp--preset--color-primary,#0073e6) !important;
  color: var(--wp--preset--color-background,#fff) !important;
}

/* 6.2 Secondary */
.wp-block-mrb-redirect-buttons.mrb-variant-secondary .mrb-button {
  background-color: var(--wp--preset--color-secondary,#28a745) !important;
  color: var(--wp--preset--color-background,#fff) !important;
}

/* 6.3 Outline */
.wp-block-mrb-redirect-buttons.mrb-variant-outline .mrb-button {
  background: transparent !important;
  border: 2px solid var(--wp--preset--color-primary,#0073e6) !important;
  color: var(--wp--preset--color-primary,#0073e6) !important;
}

/* 6.4 Inverse */
.wp-block-mrb-redirect-buttons.mrb-variant-inverse .mrb-button {
  background-color: var(--wp--preset--color-background,#fff) !important;
  color: var(--wp--preset--color-primary,#0073e6) !important;
  border: 1px solid var(--wp--preset--color-primary,#0073e6) !important;
}

/* 6.5 CTA (call-to-action, bem destacado) */
.wp-block-mrb-redirect-buttons.mrb-variant-cta .mrb-button {
  padding: 1.5rem !important;
  font-size: 1.1rem !important;
  background-color: var(--wp--preset--color-secondary,#28a745) !important;
  color: #fff !important;
  text-align: center !important;
}

/* 6.6 Rounded – cantos super arredondados */
.wp-block-mrb-redirect-buttons.mrb-variant-rounded .mrb-button {
  border-radius: 2rem !important;
  background-color: var(--wp--preset--color-primary,#0073e6) !important;
  color: #fff !important;
}

/* 6.7 Large – botão mais alto e texto maior */
.wp-block-mrb-redirect-buttons.mrb-variant-large .mrb-button {
  padding: 2rem !important;
  font-size: 1.25rem !important;
  background-color: var(--wp--preset--color-secondary,#28a745) !important;
  color: #fff !important;
}

/* 6.8 Soft – background suave e sem setinha */
.wp-block-mrb-redirect-buttons.mrb-variant-soft .mrb-button {
  background-color: #f0f0f0 !important;
  color: #333 !important;
  border-radius: 0.5em !important;
}
.wp-block-mrb-redirect-buttons.mrb-variant-soft .mrb-button::after {
  display: none !important;
}

/* 6.9 Flat – estilo flat, sem sombras nem bordas */
.wp-block-mrb-redirect-buttons.mrb-variant-flat .mrb-button {
  background: var(--wp--preset--color-primary,#0073e6) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* 6.10 Accent – borda colorida e texto em negrito */
.wp-block-mrb-redirect-buttons.mrb-variant-accent .mrb-button {
  background: transparent !important;
  border: 2px dashed var(--wp--preset--color-secondary,#28a745) !important;
  color: var(--wp--preset--color-secondary,#28a745) !important;
  font-weight: 700 !important;
}

/* 6.11 Glow – efeito “brilho” no hover */
.wp-block-mrb-redirect-buttons.mrb-variant-glow .mrb-button {
  background-color: var(--wp--preset--color-primary,#0073e6) !important;
  color: #fff !important;
}
.wp-block-mrb-redirect-buttons.mrb-variant-glow .mrb-button:hover {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.7) !important;
}

/* 6.12 Horizontal – botões lado a lado, direção em linha */
.wp-block-mrb-redirect-buttons.mrb-variant-horizontal .mrb-wrapper {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}
.wp-block-mrb-redirect-buttons.mrb-variant-horizontal .mrb-button {
  flex: 1 1 auto !important;
  width: auto !important;
  text-align: center !important;
}

/* 6.13 Pill – cantos super arredondados (estilo pílula) */
.wp-block-mrb-redirect-buttons.mrb-variant-pill .mrb-button {
  border-radius: 50px !important;
}

/* 6.14 Shadow – sombra suave por trás */
.wp-block-mrb-redirect-buttons.mrb-variant-shadow .mrb-button {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 6.15 Gradient – degradê de duas cores */
.wp-block-mrb-redirect-buttons.mrb-variant-gradient .mrb-button {
  background: linear-gradient(135deg, #0073e6 0%, #00d4ff 100%) !important;
  color: #fff !important;
}