/* ============================================
   MercadoChiapas - Estilos Pro v2 (Fix)
   ============================================ */

/* ============ BARRA DE CATEGORÍAS DESPLEGABLE ============ */
.mc-catbar {
    background: var(--mc-white);
    border-bottom: 1px solid var(--mc-gray-200);
    position: relative;
    z-index: 50;
}
.mc-catbar__wrap {
    position: relative;
}
.mc-catbar__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--mc-primary);
    color: white;
    border: none;
    border-radius: var(--mc-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin: 8px 0;
    transition: background 0.2s;
}
.mc-catbar__toggle:hover { background: var(--mc-primary-dark); }
.mc-catbar__arrow { font-size: 12px; transition: transform 0.3s; }
.mc-catbar__arrow.is-rotated { transform: rotate(180deg); }

/* OCULTO por defecto */
.mc-catbar__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mc-white);
    border: 1px solid var(--mc-gray-200);
    border-radius: 0 0 var(--mc-radius-lg) var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-lg);
    padding: 8px;
    z-index: 100;
    max-height: 420px;
    overflow-y: auto;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px;
}
/* VISIBLE solo con clase is-open */
.mc-catbar__nav.is-open {
    display: grid;
}

.mc-catbar__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--mc-gray-700);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.15s;
    white-space: nowrap;
}
.mc-catbar__item:hover {
    background: var(--mc-primary-light);
    color: var(--mc-primary);
}
.mc-catbar__item i { width: 18px; text-align: center; color: var(--mc-primary); opacity: 0.7; }
.mc-catbar__count {
    margin-left: auto;
    font-size: 11px;
    background: var(--mc-gray-100);
    color: var(--mc-gray-500);
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

/* ============ PREMIUM ROW ============ */
.mc-section--premium {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFFDE7 100%);
    border-bottom: 3px solid var(--mc-accent);
}
.mc-section--premium .mc-section__title { color: var(--mc-accent-dark); }
.mc-section--premium .mc-section__title i { color: #F59E0B; }
.mc-premium-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

/* ============ CARD: Premium & Featured ============ */
.mc-card--premium {
    border: 2px solid #F59E0B;
    box-shadow: 0 4px 15px rgba(245,158,11,0.2);
}
.mc-card--premium:hover { box-shadow: 0 8px 25px rgba(245,158,11,0.3); }
.mc-card--featured { border: 2px solid var(--mc-primary); }

/* ============ CARD: Municipio grande ============ */
.mc-card__location {
    font-size: 14px;
    font-weight: 700;
    color: var(--mc-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mc-card__location i { font-size: 13px; }

/* ============ CARD: Teléfono visible ============ */
.mc-card__phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mc-gray-600);
    margin-bottom: 6px;
}
.mc-card__phone i { color: var(--mc-primary); font-size: 11px; }
.mc-card__phone a { color: var(--mc-gray-700); font-weight: 600; }

/* ============ CARD: Vistas ============ */
.mc-card__views {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.65);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============ BOTÓN FACEBOOK ============ */
.mc-btn--facebook { background: #1877F2; color: white; border-color: #1877F2; }
.mc-btn--facebook:hover { background: #0C5DC9; color: white; }

/* ============ DURACIÓN SELECTOR ============ */
.mc-duration-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.mc-duration-option input { display: none; }
.mc-duration-card {
    text-align: center;
    padding: 12px 8px;
    border: 2px solid var(--mc-gray-200);
    border-radius: var(--mc-radius);
    cursor: pointer;
    transition: all 0.2s;
}
.mc-duration-card:hover { border-color: var(--mc-primary); }
.mc-duration-option input:checked + .mc-duration-card {
    border-color: var(--mc-primary);
    background: var(--mc-primary-light);
}
.mc-duration-card__days { display: block; font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.mc-duration-card__price { font-size: 11px; color: var(--mc-success); font-weight: 600; }

/* ============ TIPO SELECTOR ============ */
.mc-tipo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.mc-tipo-option input { display: none; }
.mc-tipo-card {
    padding: 16px 12px;
    border: 2px solid var(--mc-gray-200);
    border-radius: var(--mc-radius);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.mc-tipo-card:hover { border-color: var(--mc-gray-400); }
.mc-tipo-option input:checked + .mc-tipo-card { border-color: var(--mc-primary); background: var(--mc-primary-light); }
.mc-tipo-option input:checked + .mc-tipo-card--destacado { border-color: var(--mc-accent); background: var(--mc-accent-light); }
.mc-tipo-option input:checked + .mc-tipo-card--premium { border-color: #F59E0B; background: #FFF8E1; }
.mc-tipo-card__header { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.mc-tipo-card--destacado .mc-tipo-card__header { color: var(--mc-accent-dark); }
.mc-tipo-card--premium .mc-tipo-card__header { color: #D97706; }
.mc-tipo-card__desc { font-size: 12px; color: var(--mc-gray-500); margin-bottom: 8px; line-height: 1.4; }
.mc-tipo-card__price { font-weight: 700; font-size: 13px; color: var(--mc-gray-400); }

/* ============ CARD ACTIONS ============ */
.mc-card__actions { display: flex; gap: 6px; margin-top: 8px; }
.mc-card__actions .mc-btn { flex: 1; justify-content: center; font-size: 12px; padding: 6px 8px; }

/* ============ CERRAR AL CLICK FUERA ============ */

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .mc-premium-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .mc-catbar__nav { grid-template-columns: repeat(2, 1fr); }
    .mc-catbar__nav.is-open { display: grid; }
}
@media (max-width: 640px) {
    .mc-premium-row { grid-template-columns: repeat(2, 1fr); }
    .mc-duration-grid { grid-template-columns: repeat(3, 1fr); }
    .mc-tipo-grid { grid-template-columns: 1fr; }
    .mc-catbar__nav { grid-template-columns: 1fr; }
}