/* block-style.css */

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

/* 2. Botões full-width heredando a cor primária */
.wp-block-mrb-redirect-buttons .mrb-button {
  display: block !important;
  width: 100% !important;
  padding: 1rem !important;
  background-color: var(
    --wp--preset--color-primary,
    var(--global--color-primary, #0073e6)
  ) !important;
  color: var(
    --wp--preset--color-background,
    var(--global--color-background, #ffffff)
  ) !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 !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 {
  background-color: var(
    --wp--preset--color-primary,
    var(--global--color-primary, #005bb5)
  ) !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;
  }
}