/* ==========================================================================
   Mercadito — capa de refuerzo para el tema hijo de Hello Elementor
   --------------------------------------------------------------------------
   Se carga DESPUÉS de hello-elementor/style.css y DESPUÉS de
   mercadito/assets/css/frontend.css.

   Motivo: Hello Elementor estiliza `a` y `button` dentro de `.entry-content`
   con su color de acento. Esa regla (0,2,1) gana a las clases del plugin
   (0,1,0), así que cada botón aparecía con borde magenta, texto del color del
   tema o fondo transparente.

   Aquí se fija TODO lo que el tema puede tocar: color, fondo, borde, radio,
   relleno, tipografía, sombra y tamaño del icono. Si mañana cambia el tema,
   este archivo sigue mandando.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Normalización dentro del contenido
   -------------------------------------------------------------------------- */

.entry-content a,
.entry-content button,
.entry-content input,
.entry-content select,
.entry-content textarea {
  font-family: inherit;
  box-sizing: border-box;
}

.entry-content a:focus-visible,
.entry-content button:focus-visible {
  outline: 2px solid #F97316;
  outline-offset: 2px;
}

/* El tema mete subrayado y color de enlace en TODOS los `a`. Dentro de una
   tarjeta eso rompe el diseño, así que los contenedores clicables lo pierden. */
.entry-content a.mercadito-product-card,
.entry-content a.mercadito-category-card,
.entry-content a.mercadito-store-card,
.entry-content a.m-info-chip,
.entry-content a.m-info-card,
.entry-content a.m-notif,
.entry-content a.m-inbox-item,
.entry-content a.mercadito-store-logo,
.entry-content a.m-hero-search,
.entry-content a.m-chat-store {
  text-decoration: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   2. Botones del plugin
   -------------------------------------------------------------------------- */

.entry-content .mercadito-btn,
.entry-content .m-btn,
.entry-content a.mercadito-btn,
.entry-content a.m-btn,
.entry-content button.mercadito-btn,
.entry-content button.m-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  background-image: none !important;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none !important;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* Primario */
.entry-content .mercadito-btn-primary,
.entry-content .m-btn-primary,
.entry-content a.mercadito-btn-primary,
.entry-content a.m-btn-primary {
  background-color: #F97316 !important;
  border-color: #F97316 !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 22px -14px rgba(234, 88, 12, 0.75);
}

.entry-content .mercadito-btn-primary:hover,
.entry-content .m-btn-primary:hover {
  background-color: #EA580C !important;
  border-color: #EA580C !important;
  color: #FFFFFF !important;
}

/* Suave */
.entry-content .mercadito-btn-soft,
.entry-content .m-btn-soft,
.entry-content a.mercadito-btn-soft,
.entry-content a.m-btn-soft {
  background-color: #FFF3EA !important;
  border-color: #FED7AA !important;
  color: #C2410C !important;
  box-shadow: none;
}

.entry-content .mercadito-btn-soft:hover,
.entry-content .m-btn-soft:hover {
  background-color: #FFE8D6 !important;
  border-color: #FDBA74 !important;
  color: #9A3412 !important;
}

/* Contorno */
.entry-content .mercadito-btn-outline,
.entry-content .m-btn-outline,
.entry-content a.mercadito-btn-outline,
.entry-content a.m-btn-outline {
  background-color: transparent !important;
  border-color: #E6EAF0 !important;
  color: #0F172A !important;
  box-shadow: none;
}

.entry-content .mercadito-btn-outline:hover,
.entry-content .m-btn-outline:hover {
  background-color: #FFF3EA !important;
  border-color: #F97316 !important;
  color: #C2410C !important;
}

/* Blanco */
.entry-content .mercadito-btn-white,
.entry-content .m-btn-white,
.entry-content a.mercadito-btn-white,
.entry-content a.m-btn-white {
  background-color: #FFFFFF !important;
  border-color: #E6EAF0 !important;
  color: #0F172A !important;
  box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.45);
}

.entry-content .mercadito-btn-white:hover,
.entry-content .m-btn-white:hover {
  background-color: #FFF7ED !important;
  border-color: #FED7AA !important;
  color: #9A3412 !important;
}

/* Amarillo tipo carrito */
.entry-content .mercadito-btn-cart,
.entry-content .m-btn-cart {
  background-color: #FFD814 !important;
  border-color: #F7CA00 !important;
  color: #0F172A !important;
}

/* Botón de icono (cabecera) */
.entry-content .mercadito-icon-btn,
.entry-content a.mercadito-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border: 1px solid #E6EAF0 !important;
  border-radius: 50% !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #0F172A !important;
  text-decoration: none !important;
  box-shadow: none;
}

.entry-content .mercadito-icon-btn:hover,
.entry-content a.mercadito-icon-btn:hover {
  border-color: #FDBA74 !important;
  background-color: #FFF7ED !important;
  color: #C2410C !important;
}

/* Tamaños: el tema no debe alterarlos */
.entry-content .m-btn--xs { padding: 6px 13px; font-size: 0.76rem; }
.entry-content .m-btn--sm,
.entry-content .m-btn-sm,
.entry-content .mercadito-btn-sm { padding: 9px 17px; font-size: 0.84rem; }
.entry-content .m-btn--md { padding: 12px 22px; font-size: 0.94rem; }
.entry-content .m-btn--lg,
.entry-content .m-btn-lg,
.entry-content .mercadito-btn-lg { padding: 15px 28px; font-size: 1rem; }
.entry-content .m-btn--xl { padding: 18px 34px; font-size: 1.06rem; }
.entry-content .m-btn--block,
.entry-content .m-btn-block,
.entry-content .mercadito-btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   3. Iconos
   -------------------------------------------------------------------------- */

.entry-content .m-icon,
.entry-content .mercadito-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.entry-content .mercadito-btn .m-icon,
.entry-content .m-btn .m-icon {
  width: 18px !important;
  height: 18px !important;
}

.entry-content .m-btn--xs .m-icon { width: 15px !important; height: 15px !important; }
.entry-content .m-btn--xl .m-icon { width: 20px !important; height: 20px !important; }

/* --------------------------------------------------------------------------
   4. Favorito (el caso que más se rompía)
   -------------------------------------------------------------------------- */

.entry-content button.m-fav {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid #E6EAF0 !important;
  border-radius: 50% !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #94A3B8 !important;
  box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.25) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.entry-content button.m-fav:hover {
  border-color: #F97316 !important;
  color: #F97316 !important;
}

.entry-content button.m-fav svg {
  width: 18px !important;
  height: 18px !important;
  fill: none;
  stroke: currentColor;
}

.entry-content button.m-fav.is-active {
  color: #E11D48 !important;
  border-color: #E6EAF0 !important;
  background-color: #FFFFFF !important;
}

.entry-content button.m-fav.is-active svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* --------------------------------------------------------------------------
   5. Formularios
   -------------------------------------------------------------------------- */

.entry-content .mercadito-form input[type="text"],
.entry-content .mercadito-form input[type="email"],
.entry-content .mercadito-form input[type="tel"],
.entry-content .mercadito-form input[type="number"],
.entry-content .mercadito-form input[type="search"],
.entry-content .mercadito-form input[type="password"],
.entry-content .mercadito-form select,
.entry-content .mercadito-form textarea,
.entry-content .m-chat-form textarea,
.entry-content .mercadito-form-group input,
.entry-content .mercadito-form-group select,
.entry-content .mercadito-form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  background-color: #FFFFFF;
  background-image: none;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #0F172A;
  box-shadow: none;
}

.entry-content .mercadito-form input:focus,
.entry-content .mercadito-form select:focus,
.entry-content .mercadito-form textarea:focus {
  border-color: #F97316;
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16);
}

/* --------------------------------------------------------------------------
   6. Listas y tablas dentro del contenido
   -------------------------------------------------------------------------- */

.entry-content .mercadito-page ul,
.entry-content .mercadito-page ol,
.entry-content .m-cta-list,
.entry-content .m-info-grid,
.entry-content .mercadito-orders-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry-content .mercadito-page ul li,
.entry-content .mercadito-page ol li {
  margin: 0;
}

/* --------------------------------------------------------------------------
   7. Tipografía: el tema impone tamaños a h1..h6 dentro del contenido
   -------------------------------------------------------------------------- */

.entry-content .mercadito-page h1,
.entry-content .mercadito-page h2,
.entry-content .mercadito-page h3 {
  letter-spacing: -0.02em;
  text-transform: none;
}

.entry-content .mercadito-page-title {
  margin: 0 0 18px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #0F172A;
}

/* --------------------------------------------------------------------------
   8. Responsive: el tema no debe meter scroll horizontal
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .entry-content .mercadito-page {
    overflow-x: clip;
  }
}

@media (max-width: 768px) {
  .entry-content .mercadito-btn,
  .entry-content .m-btn {
    min-height: 44px;
  }

  .entry-content .m-btn--xs,
  .entry-content .m-btn--sm {
    min-height: 36px;
  }
}

/* --------------------------------------------------------------------------
   9. Botones utilitarios
   --------------------------------------------------------------------------
   No son CTA: son controles pequeños (cantidad, borrar, valorar, cerrar).
   Hello Elementor les aplica `background`, `border`, `border-radius` y
   `padding` como a cualquier `button`, así que cada uno fija su forma aquí.
   -------------------------------------------------------------------------- */

.entry-content button.m-qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--m-surface-2, #F1F3F7) !important;
  background-image: none !important;
  color: var(--m-text, #475569) !important;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer;
}

.entry-content button.m-cart-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 1px solid var(--m-border, #E6EAF0) !important;
  border-radius: 50% !important;
  background: var(--m-surface, #FFFFFF) !important;
  background-image: none !important;
  color: var(--m-text-3, #94A3B8) !important;
  box-shadow: none !important;
  cursor: pointer;
}

.entry-content button.m-cart-remove:hover {
  border-color: #FECACA !important;
  background: #FEF2F2 !important;
  color: #B91C1C !important;
}

.entry-content button.m-rate-star {
  display: inline-flex !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  color: #CBD5E1 !important;
  box-shadow: none !important;
  line-height: 0 !important;
  cursor: pointer;
}

.entry-content button.m-rate-star.is-on,
.entry-content button.m-rate-star:hover { color: #F59E0B !important; }

.entry-content button.m-order-delete {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 6px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--m-text-3, #94A3B8) !important;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  box-shadow: none !important;
  cursor: pointer;
}

.entry-content button.m-order-delete:hover {
  border-color: #FECACA !important;
  background: #FEF2F2 !important;
  color: #B91C1C !important;
}

.entry-content button.m-announce-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.18) !important;
  background-image: none !important;
  color: inherit !important;
  box-shadow: none !important;
  cursor: pointer;
}

.entry-content button.m-qr-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 1px solid var(--m-border, #E6EAF0) !important;
  border-radius: 8px !important;
  background: var(--m-surface-2, #F1F3F7) !important;
  background-image: none !important;
  color: var(--m-text-2, #64748B) !important;
  box-shadow: none !important;
  cursor: pointer;
}

.entry-content button.m-ref-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--m-border, #E6EAF0) !important;
  border-radius: 0 !important;
  background: var(--m-surface-2, #F1F3F7) !important;
  background-image: none !important;
  color: var(--m-primary, #F97316) !important;
  box-shadow: none !important;
  cursor: pointer;
}

.entry-content button.m-ref-copy:hover {
  background: var(--m-primary-soft, #FFF3EA) !important;
  color: var(--m-primary-dark, #EA580C) !important;
}

.entry-content button.m-spop-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--m-surface-2, #F1F3F7) !important;
  background-image: none !important;
  color: var(--m-ink, #0E1B2E) !important;
  box-shadow: none !important;
  cursor: pointer;
}

.entry-content button.m-subscribe-btn {
  flex: none !important;
  height: 48px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
}

.entry-content button.m-chat-send {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--m-primary, #F97316) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  cursor: pointer;
}

.entry-content button.m-inbox-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  width: 100% !important;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
  font-family: inherit;
  font-size: inherit;
  text-align: left !important;
  text-transform: none;
  box-shadow: none !important;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   10. Acordeón, reseñas y contenido
   -------------------------------------------------------------------------- */

.entry-content details.m-faq-item {
  border: 1px solid var(--m-border, #E6EAF0);
  border-radius: 10px;
  background: var(--m-surface, #FFFFFF);
}

.entry-content summary.m-faq-q {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px !important;
  list-style: none !important;
  cursor: pointer;
  color: var(--m-ink, #0F172A);
}

.entry-content summary.m-faq-q::-webkit-details-marker { display: none; }
.entry-content summary.m-faq-q::marker { content: ''; }

.entry-content figure.m-testi-card { margin: 0 !important; }

.entry-content blockquote.m-testi-text {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  quotes: none;
  font-style: normal;
  color: var(--m-text, #334155);
}

.entry-content blockquote.m-testi-text::before,
.entry-content blockquote.m-testi-text::after { content: none; }

.entry-content select.mercadito-order-status-select {
  width: auto;
  padding: 5px 10px;
  border: 1px solid var(--m-border, #E6EAF0);
  border-radius: 999px;
  background-color: #FFFFFF;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--m-text, #334155);
}

.entry-content label.m-upload,
.entry-content label.m-pay-opt,
.entry-content label.m-seller-method {
  display: flex;
  cursor: pointer;
  text-transform: none;
  font-weight: 600;
}

/* The real file input stays visually hidden but clickable through its label. */
.entry-content .m-upload input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --------------------------------------------------------------------------
   11. Imágenes y tablas dentro del marketplace
   -------------------------------------------------------------------------- */

.entry-content .mercadito-page img {
  max-width: 100%;
  height: auto;
}

.entry-content .mercadito-page table {
  width: 100%;
  border-collapse: collapse;
}

/* ------------------------------------------------------------
   Puntos / VIP / pestañas de publicación
   ------------------------------------------------------------ */

.m-publish-tab,
.m-publish-tab:hover,
.m-publish-tab:focus,
.m-publish-tab:visited {
  text-decoration: none !important;
  box-shadow: none !important;
}

.m-loyalty-redeem input[type="number"] {
  max-width: 160px;
}

.m-loyalty-redeem .mercadito-btn {
  white-space: nowrap;
}