/* HivePress overrides for the mobile theme — minimal, only what we use */

.hp-listing__action--favorite{
  position: absolute; top: 6px; right: 6px; z-index: 3;
  background: rgba(255,255,255,.95);
  border-radius: 50%;
  padding: 5px;
}

.hp-listing__featured-badge,
.hp-listing__verified-badge{
  position: absolute; top: 6px; left: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 9px; font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: var(--r-full);
  z-index: 2;
}
.hp-listing__featured-badge{ background: var(--navy); }

.hp-listing__title,
.hp-listing__title a{
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-listing__details{
  list-style: none; margin: 0; padding: 8px 10px 10px;
}

/* HivePress forms */
.hp-form input,
.hp-form select,
.hp-form textarea{
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit; font-size: 14px;
  background: var(--paper); color: var(--ink);
}
.hp-form input:focus, .hp-form select:focus, .hp-form textarea:focus{
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(31,62,90,.08);
}
.hp-form__submit, .hp-button{
  background: var(--navy); color: #fff;
  border: none; border-radius: var(--r-full);
  padding: 12px 20px; font-weight: 600;
  font-size: 14px; cursor: pointer;
}
.hp-form__submit:hover, .hp-button:hover{ background: var(--navy-dark); }

.hp-form__label, .hp-field__label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 6px;
}

/* ─── Fix 1: Ocultar campo Ubicación nativo de HivePress (usamos Zona/Barrio) ─── */
.hp-field--name-location,
.hp-form__field--name-location,
[data-name="location"],
.hp-field[data-name="location"] {
  display: none !important;
}

/* ─── Fix 2: Padding extra al final del formulario para no quedar tapado por el bottomnav ─── */
.hp-form,
.hp-listing-submit-page .hp-form,
.hp-page--listing-submit {
  padding-bottom: calc(var(--bottomnav-h, 64px) + var(--safe-bot, 0px) + 32px) !important;
}

/* ═══════════════════════════════════════════════════
   IDENTIDAD VISUAL CHASCOMARKET — Verde #0C976E
   ═══════════════════════════════════════════════════ */

/* ─── Botones principales ─── */
.hp-form__submit,
.hp-button,
.hp-button--primary,
button[type="submit"],
.cm-btn,
.cm-btn.primary {
  background: #0C976E !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background .2s ease !important;
}
.hp-form__submit:hover,
.hp-button:hover,
button[type="submit"]:hover,
.cm-btn:hover {
  background: #097A58 !important;
}

/* ─── Botón outline ─── */
.hp-button--secondary,
.cm-btn.outline {
  background: transparent !important;
  color: #0C976E !important;
  border: 2px solid #0C976E !important;
  border-radius: 999px !important;
}
.hp-button--secondary:hover,
.cm-btn.outline:hover {
  background: #EDF8F4 !important;
}

/* ─── Botón publicar (+) del bottomnav ─── */
.cm-bn-publish {
  background: #0C976E !important;
  box-shadow: 0 4px 16px rgba(12,151,110,.35) !important;
}

/* ─── Topbar ─── */
.cm-topbar {
  background: #0C976E !important;
  border-bottom: none !important;
}
.cm-topbar .cm-word {
  color: #fff !important;
}
.cm-topbar > button svg,
.cm-topbar .cm-menu-btn svg {
  stroke: #fff !important;
  color: #fff !important;
}
/* Logo: NO invertir — el logo ya tiene colores propios */
.cm-logo-img {
  filter: none !important;
}
/* Cruz del + siempre blanca */
.cm-bn-publish svg {
  stroke: #fff !important;
  color: #fff !important;
}

/* ─── Links y acentos ─── */
a { color: #0C976E !important; }
a:hover { color: #097A58 !important; }

/* ─── Inputs y selects — borde verde al foco ─── */
.hp-field input:focus,
.hp-field select:focus,
.hp-field textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #0C976E !important;
  box-shadow: 0 0 0 3px rgba(12,151,110,.15) !important;
  outline: none !important;
}

/* ─── Selects y dropdowns — flecha verde ─── */
select {
  accent-color: #0C976E !important;
}
.hp-field select {
  border-radius: 12px !important;
  border: 1.5px solid #D6F0E8 !important;
}
.hp-field select:focus {
  border-color: #0C976E !important;
}

/* ─── Checkbox y radio ─── */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #0C976E !important;
}

/* ─── Labels de atributos ─── */
.hp-form__label,
.hp-field__label {
  color: #0C976E !important;
  font-weight: 700 !important;
}

/* ─── Tab activo / navegación activa ─── */
.cm-bn-tab.on,
.cm-bn-tab.on span,
.cm-bn-tab.on svg {
  color: #0C976E !important;
  stroke: #0C976E !important;
}

/* ─── Avatar initials ─── */
.cm-avatar {
  background: #0C976E !important;
  color: #fff !important;
}

/* ─── Precio en tarjeta de anuncio ─── */
.hp-listing__price,
[class*="price"] {
  color: #0C976E !important;
  font-weight: 800 !important;
}

/* ─── Badge / tags ─── */
.hp-badge,
.hp-listing__badge {
  background: #0C976E !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* ─── Barra de búsqueda ─── */
.cm-searchbar {
  border: 1.5px solid #D6F0E8 !important;
  border-radius: 999px !important;
}
.cm-searchbar:focus-within {
  border-color: #0C976E !important;
  box-shadow: 0 0 0 3px rgba(12,151,110,.12) !important;
}

/* ═══════════════════════════════════════════════════
   FIX: Imágenes de categoría dentro del óvalo
   ═══════════════════════════════════════════════════ */

/* Contenedor de imagen de categoría — forzar óvalo */
.hp-listing-category__image,
.hp-listing-category .hp-listing-category__image {
  overflow: hidden !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  display: block !important;
}

/* Imagen dentro del óvalo — cubrir sin deformar */
.hp-listing-category__image img,
.hp-listing-category .hp-listing-category__image img,
.hp-listing-category > a > img,
.hp-listing-category img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 50% !important;
}

/* ═══════════════════════════════════════════════════
   FIX: Scroll lag en grilla de categorías
   ═══════════════════════════════════════════════════ */

/* Pre-reservar espacio para evitar reflow al cargar */
.hp-listing-category {
  contain: layout style !important;
}

/* GPU acceleration en contenedores de scroll */
.hp-listing-categories,
.hp-listing-categories__list,
.hp-listings-section,
.hp-page--listings {
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Lazy load nativo en todas las imágenes de categoría */
.hp-listing-category img {
  loading: lazy !important;
  content-visibility: auto !important;
  contain-intrinsic-size: 300px 300px !important;
}

/* Animación suave al aparecer */
.hp-listing-category {
  animation: fadeInUp .3s ease both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-listing-category:nth-child(1) { animation-delay: .05s; }
.hp-listing-category:nth-child(2) { animation-delay: .1s; }
.hp-listing-category:nth-child(3) { animation-delay: .15s; }
.hp-listing-category:nth-child(4) { animation-delay: .2s; }
.hp-listing-category:nth-child(5) { animation-delay: .25s; }
.hp-listing-category:nth-child(6) { animation-delay: .3s; }

/* ═══════════════════════════════════════════════════
   SKELETON LOADING — Categorías y Anuncios
   ═══════════════════════════════════════════════════ */

@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.cm-skeleton {
  background: linear-gradient(90deg, #e8f5f1 25%, #c8ece3 50%, #e8f5f1 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 12px;
}

/* Skeleton para grilla de categorías */
.cm-skeleton-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}
.cm-skeleton-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
}
.cm-skeleton-oval {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: linear-gradient(90deg, #e8f5f1 25%, #c8ece3 50%, #e8f5f1 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.cm-skeleton-text {
  height: 14px;
  width: 70%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8f5f1 25%, #c8ece3 50%, #e8f5f1 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.cm-skeleton-text.sm {
  height: 10px;
  width: 40%;
}

/* Skeleton para feed de anuncios (masonry) */
.cm-skeleton-feed {
  column-count: 2;
  column-gap: 8px;
  padding: 8px;
}
.cm-skeleton-card {
  break-inside: avoid;
  margin-bottom: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f9f4;
}
.cm-skeleton-img {
  width: 100%;
  background: linear-gradient(90deg, #e8f5f1 25%, #c8ece3 50%, #e8f5f1 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.cm-skeleton-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Ocultar skeleton cuando HivePress ya cargó */
.hp-listing-categories ~ .cm-skeleton-cats,
.hp-listings ~ .cm-skeleton-feed {
  display: none !important;
}