/* HP Category Featured Listings — front.css */

/* ================================================================
   REBORDE
   article.hp-listing es la clase confirmada en oventas.com
   ================================================================ */

article.hp-listing.hpcf-category-featured {
    box-shadow: 0 0 0 2px #0e90b5;
    border-radius: inherit;
    position: relative;
}

article.hp-listing.hpcf-global-featured {
    box-shadow: 0 0 0 2px #f5a623;
    border-radius: inherit;
    position: relative;
}

/* ================================================================
   BADGE
   HP nativo usa: <div class="hp-badge hp-badge--featured">
   Nuestro badge tiene clase adicional hpcf-badge-cat para color
   ================================================================ */

.hp-badge.hpcf-badge-cat {
    background-color: #0e90b5 !important;
    color: #fff !important;
}

/* Asegura que el badge se posicione igual que el nativo de HP */
article.hp-listing.hpcf-category-featured .hpcf-badge-cat {
    position: absolute;
    z-index: 10;
}

/* ================================================================
   FEATURING OPTIONS BOX
   ================================================================ */

.hpcf-featuring-box { margin: 20px 0; }

.hpcf-featuring-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hpcf-option {
    flex: 1 1 260px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    background: #fafafa;
}

.hpcf-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}

.hpcf-badge { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.hpcf-badge-global   { background: #fff3cd; color: #856404; }
.hpcf-badge-category { background: #cff4fc; color: #055160; }

.hpcf-price  { font-size: 13px; font-weight: 600; color: #333; }
.hpcf-desc   { font-size: 13px; color: #666; margin: 0 0 12px; line-height: 1.5; }
.hpcf-note   { font-size: 12px; color: #999; font-style: italic; margin: 8px 0 0; }
.hpcf-active { display: inline-block; font-size: 12px; color: #28a745; font-weight: 600; margin-bottom: 8px; }

.hpcf-btn-global, .hpcf-btn-category {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px !important;
    color: #fff !important;
}
.hpcf-btn-global   { background: #f5a623 !important; border-color: #f5a623 !important; }
.hpcf-btn-category { background: #0e90b5 !important; border-color: #0e90b5 !important; }
.hpcf-btn-global:hover   { background: #e0951e !important; border-color: #e0951e !important; }
.hpcf-btn-category:hover { background: #0a7a9a !important; border-color: #0a7a9a !important; }

@media (max-width: 600px) {
    .hpcf-featuring-row { flex-direction: column; }
}