/*
Theme Name:   Bindy Child
Theme URI:    https://bindy.mx
Description:  Tema hijo de ListingPro para Bindy.mx
Author:       Maple Lab
Author URI:   https://maplelab.com.mx
Template:     listingpro
Version:      1.0.17
License:      GPL v2 or later
Text Domain:  bindy-child
*/

/*
   IMPORTANTE: Las personalizaciones visuales se cargan desde
   assets/tokens.css y este archivo se mantiene vacío.
   Si necesitás overrides puntuales, agregalos al final del archivo.
*/

/* ============================================================
   Sesión 06 — Diferenciación visual de planes
   ============================================================ */

/* Tarjeta Featured: borde naranja + badge "Pro" via ::before */
.bindy-card--featured {
    position: relative;
    border: 2px solid var(--bindy-secondary) !important;
    box-shadow: 0 4px 16px rgba(2, 204, 226, 0.2) !important;
}

.bindy-card--featured::before {
    content: 'Pro';
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.2em 0.65em;
    background: var(--bindy-secondary);
    color: var(--bindy-primary);
    border-radius: var(--bindy-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.4;
    z-index: 2;
    pointer-events: none;
}

/* Tarjeta Base: sin badge, borde neutro */
.bindy-card--base {
    border: 1px solid var(--bindy-muted) !important;
}

/* ============================================================
   Sesión 10 — Mejoras visuales del home
   ============================================================ */

/* NOTA: el hero ya NO vive en el header de ListingPro (ahora es el shortcode
   [bindy_hero] en Elementor). La portada vieja (BINDY_PORTADAV4) que se pintaba
   aquí se quitó — dejaba una franja gris en el navbar del home. El color del
   navbar lo controla functions.php (blanco en el home). */

/* Logo navbar — fondo transparente, sin filtro, tamaño legible */
.lp-logo img {
    filter: none;
    max-height: 44px;
    width: auto;
}

/* Quitar el overlay negro de ListingPro — ya no necesario con gradiente de marca */
.lp-header-bg .page-header-overlay,
.home-categories-area .page-header-overlay {
    background: transparent !important;
}

/* Título y subtítulo del hero con sombra suave para legibilidad sobre el glow */
.lp-header-search-wrap h1,
.lp-header-search-wrap h2,
.lp-header-search-wrap .lp-main-title,
.lp-header-search-wrap .lp-search-description p,
.home-categories-area h1,
.home-categories-area h2 {
    text-shadow: 0 2px 20px rgba(10, 45, 120, 0.45);
}

/* Palabra destacada del hero ("ideal") en cian de marca */
.lp_auto_loc_container .lp-dyn-city,
.lp-home-banner-contianer .lp-dyn-city {
    color: var(--bindy-secondary) !important;
}

/* Ciudades — fallback gradient para cards SIN imagen.
   Sin !important para que el background-image inline de ListingPro
   pueda sobreescribirlo cuando sí hay foto subida. */
.lp-location-card,
.loc-abstracted-classic-card,
[class*="loc-card"],
.lp-location-item {
    background: linear-gradient(
        135deg,
        var(--bindy-primary) 0%,
        #0a4fa0 100%
    );
}

/* Garantizar que texto de ciudad sea siempre legible */
.lp-location-card *,
.loc-abstracted-classic-card *,
[class*="loc-card"] * {
    color: #fff !important;
}

/* Sección "What's Trending" — actividades: fondo limpio */
.lp-activity-section {
    background: var(--bindy-bg-soft);
}

/* Ocultar el "Hello World" post si aparece en blog grids */
.blog-grid-post[data-post-id="1"] {
    display: none;
}

/* ============================================================
   Navbar horizontal tipo mockup (logo izquierda + menú en una fila)
   ListingPro colapsa a hamburguesa por debajo de 992px. Forzamos el
   layout de escritorio desde 960px (logo izquierda + menú en una fila),
   que es el ancho mínimo donde la barra completa (logo + 3 items + botón
   + cuenta ≈ 920px) cabe sin encimarse. Por debajo de 960px se mantiene
   la hamburguesa porque el contenido ya no entra en una sola fila.
   ============================================================ */
@media (min-width: 960px) {
    /* Quitar el ícono de hamburguesa y su columna */
    .nav-icon,
    .mobile-nav-icon {
        display: none !important;
    }
    /* Logo siempre a la izquierda */
    .lp-logo-container {
        float: left !important;
        text-align: left !important;
    }
    /* Mostrar el menú y alinearlo en una sola fila con botón y cuenta */
    .lp-menu-container {
        display: block !important;
        float: right !important;
        width: auto !important;
    }
    .lp-menu-container .pull-right {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
    }
    .lp-menu-container .lp-menu {
        display: inline-flex !important;
        align-items: center;
        float: none !important;
    }
}

/* ============================================================
   Header móvil: logo a la IZQUIERDA, hamburguesa a la DERECHA.

   ListingPro invierte el header por debajo de 980px (responsive.css:
   ".lp-logo-container { float: right }"), dejando el logo a la derecha y la
   hamburguesa a la izquierda. Eso contradice el escritorio y la costumbre:
   el logo se espera arriba a la izquierda y es el atajo al inicio.

   Nota: la regla de "logo siempre a la izquierda" de arriba vive dentro de
   @media (min-width: 960px), así que en móvil nunca aplicaba.
   ============================================================ */
@media (max-width: 980px) {
    .lp-logo-container {
        float: left !important;
        text-align: left !important;
    }
    /* La hamburguesa NO usa float: está en position:absolute dentro de
       .header-right-panel (que ocupa todo el ancho). Por eso se ancla con
       left/right, no con float — si no, se encima con el logo. */
    .mobile-nav-icon,
    .header-right-panel .nav-icon {
        left: auto !important;
        right: 0 !important;
        text-align: right !important;
    }
}

/* ============================================================
   Fix menú móvil (off-canvas mmenu): el logo del navbar del menú
   lateral (a.userimage) no tenía límite de tamaño → el wordmark
   ancho se renderizaba gigante y se encimaba con los items del
   menú ("Publicar perfil" / "Cerrar sesión"). Lo acotamos a una
   altura legible, como el logo del navbar.
   ============================================================ */
#menu .mm-navbar a.userimage,
.mm-menu .mm-navbar a.userimage {
    display: inline-flex;
    align-items: center;
    max-width: 70%;
}
#menu .mm-navbar a.userimage img,
.mm-menu .mm-navbar a.userimage img,
.mm-menu .mm-navbar img {
    max-height: 36px !important;
    width: auto !important;
    height: auto !important;
}

/* ============================================================
   Pulido de tarjetas de resultados (buscador / categoría).
   SOLO visual (sombra, bordes, hover) — NADA de position/float/
   background en la columna, porque el grid clásico de ListingPro
   es frágil y eso bloquea el clic de la tarjeta. Aplica tanto a
   la carga inicial como a los resultados por AJAX (es CSS).
   ============================================================ */
.classic-view-grid-container {
    box-shadow: 0 6px 20px rgba(8, 58, 132, .08) !important;
    border-radius: 14px !important;
    transition: box-shadow .2s ease !important;
}
.classic-view-grid-container:hover {
    box-shadow: 0 12px 32px rgba(8, 58, 132, .16) !important;
}

/* ============================================================
   Botón de WhatsApp prominente en el perfil (sidebar de contacto).
   Para Bindy, WhatsApp es el canal principal → lo convertimos en un
   botón verde grande que resalta sobre los demás datos de contacto.
   ============================================================ */
.widget-classic-box .lp-listing-phone-whatsapp a,
.lp-listing-phone-whatsapp.contacts a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366 !important;
    background-color: #25D366 !important;
    color: #fff !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background .2s ease;
}
.widget-classic-box .lp-listing-phone-whatsapp a:hover,
.lp-listing-phone-whatsapp.contacts a:hover { background-color: #1da851 !important; }
.widget-classic-box .lp-listing-phone-whatsapp a i,
.lp-listing-phone-whatsapp.contacts a i { color: #fff !important; font-size: 1.1em; }

/* ============================================================
   Botones secundarios del perfil unificados: "Cómo llegar" y
   "Ver todos los horarios" con la misma distribución y color
   (pastilla azul outline de marca).
   ============================================================ */
.widget-classic-box .get-direction a,
.get-direction a,
a.show-all-timings {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: #fff !important;
    color: #083A84 !important;
    border: 1.5px solid #083A84 !important;
    border-radius: 8px !important;
    padding: 7px 16px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.get-direction a:hover,
a.show-all-timings:hover {
    background: #083A84 !important;
    color: #fff !important;
}

/* ── Header de páginas INTERNAS en una sola fila (logo + buscador + botones).
      ListingPro suma anchos fijos (buscador 595px + menú col-md-6) que no
      caben en su panel → el menú se descolgaba a otra fila. Scope
      .header-inner-page-wrap = solo internas; el home tiene navbar propio. ── */
.header-inner-page-wrap .fullwidth-header > .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}
.header-inner-page-wrap .lp-logo-container {
    float: none;
    width: auto;
    flex: 0 0 auto;
}
.header-inner-page-wrap .header-right-panel {
    float: none;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.header-inner-page-wrap .lp-search-header-style-outer {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
}
.header-inner-page-wrap .lp-search-header-style {
    width: 100%;
}
.header-inner-page-wrap .lp-menu-container {
    float: none;
    width: auto;
    flex: 0 0 auto;
}
@media (max-width: 991px) {
    .header-inner-page-wrap .fullwidth-header > .row,
    .header-inner-page-wrap .header-right-panel {
        flex-wrap: wrap;
    }
    .header-inner-page-wrap .lp-search-header-style-outer {
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* ── "Publicar perfil" del header interno: pastilla de una sola línea ───────
      Jorge (2026-08-10, captura de /que-es-bindy/ con su sesión iniciada): el
      botón se partía en dos renglones ("Publicar" / "perfil") y se encimaba con
      su nombre. Causa: el <a> del tema es `display:inline` con `white-space:
      normal`, así que envuelve en cuanto el nombre del usuario le come el
      ancho — y el nombre de Jorge es el caso extremo. En el HOME esto ya estaba
      resuelto, pero ese CSS se imprime SOLO en la portada (Ui\NavIntroButton +
      el navbar del child), así que las internas nunca lo recibieron.
      Se le da la misma pastilla de 44px del home y se deja que el nombre —no el
      botón— sea lo que se recorte si falta espacio. ── */
.header-inner-page-wrap .lp-add-listing-btn a.header-list-icon-st6 {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    height: 44px;
    padding: 0 1.1em;
    border-radius: 8px;
    line-height: 1;
    white-space: nowrap;
}
.header-inner-page-wrap .lp-add-listing-btn {
    flex: 0 0 auto;
}
/* El nombre del usuario cede primero: se recorta con puntos suspensivos en vez
   de empujar al botón. */
.header-inner-page-wrap .contentlogin-flex {
    min-width: 0;
    align-items: center;
}
/* El nombre va en un <a> sin clase dentro de .lp-join-user-info (medido en el
   header interno con sesión iniciada). Una sola línea, con puntos suspensivos
   si no cabe. */
.header-inner-page-wrap .lp-join-now.lp-join-user-info > ul > li > a {
    display: block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Header en CELULAR: el logo y la hamburguesa dejan de encimarse ─────────
      Medido en /que-es-bindy/ a 390px: `.lp-logo` mide 200px con
      `text-align:right`, así que el wordmark real cae en x139–227 (se ve
      "centrado"), y la hamburguesa —que es hermana dentro del mismo
      contenedor y va con float— aterriza en x210,y48: justo encima del logo.
      Se ordena el contenedor como una fila flex: logo a la izquierda,
      hamburguesa a la derecha, sin floats de por medio. ── */
@media (max-width: 991px) {
    .lp-header .lp-logo-container {
        float: none !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .lp-header .lp-logo-container .lp-logo {
        float: none !important;
        width: auto;
        max-width: 150px;
        text-align: left !important;
    }
    .lp-header .lp-logo-container .lp-logo img {
        max-height: 38px;
        width: auto;
    }
    .lp-header .lp-logo-container .nav-icon {
        float: none !important;
        margin: 0 !important;
    }
}

/* ── Form de alta/edición en móvil: botón de guardar completo ──────────────
   Jorge (2026-08-03): "el botón de guardar sale incompleto" en el celular.
   Dos causas cubiertas: (1) el <input type=submit> no envuelve texto y
   "Actualizar y previsualizar" a 20px no cabe en el ancho útil (~285px)
   → se recortaba; (2) el app-view móvil mete barras fijas abajo que tapan
   el final del form → aire extra tras el botón. */
@media (max-width: 600px) {
    .blue-section {
        padding: 20px 14px;
    }
    .blue-section .preview-section .lp-secondary-btn.btn-first-hover {
        font-size: 15px;
        height: auto;
        min-height: 48px;
        padding: 12px 10px;
        white-space: normal;
        width: 100%;
    }
    form#lp-submit-form,
    .lp-listing-form {
        padding-bottom: 90px;
    }
}

/* Debug 24-sep (E2): en celular ListingPro deja .page-container-five sin
   relleno lateral y su .row (margen -15px) se sale 15px por cada lado: la
   página mide 391px en un cel de 375 (se mueve de lado) y las tarjetas del
   buscador quedan pegadas a la orilla. Sin el margen negativo, las columnas
   (relleno 15px) dan el margen lateral. */
@media (max-width: 767px) {
    .page-container-five > .row {
        margin-left: 0;
        margin-right: 0;
    }
    /* En el perfil, el campo del buscador del header y la barra de avisos de
       ListingPro miden 5px más que la pantalla (380px en un cel de 375). */
    input.lp-suggested-search {
        min-width: 0 !important; /* el tema le pone min-width: 365px */
        max-width: 100%;
        box-sizing: border-box;
    }
    .lp-notifaction-area {
        max-width: 100vw;
        box-sizing: border-box;
    }
}

/* Jorge, 24-sep: en el perfil sobra la barra «Qué / Dónde» del
   header — quien ya está viendo a un profesional quiere REGRESAR, no empezar
   otra búsqueda. En su lugar va el botón de regresar (Ui\BackToResults). */
/* Benjamín, 24-sep: también en compu. */
body.single-listing .header-right-panel .lp-search-header-style-outer {
    display: none !important;
}

/* Benjamín, 25-sep («banner superior con mucho espacio»; el 80 % entra por
   celular): en celular el encabezado de las páginas internas es solo logo +
   menú. La barra «Qué / Dónde» del tema lo hacía medir hasta 288px (FAQ) y,
   donde ya estaba oculta (/buscar/), su contenedor seguía dejando 80px de azul
   vacío. Para buscar: la barra propia de /buscar/ y «Buscar profesionales» en
   el menú hamburguesa (Ui\MobileMenu). */
@media (max-width: 991px) {
    .header-inner-page-wrap .header-right-panel .lp-search-header-style-outer {
        display: none !important;
    }
    /* Sin buscador ya no hace falta el segundo renglón: logo y menú en una sola
       fila (el renglón vacío dejaba ~40px de azul). */
    .header-inner-page-wrap .fullwidth-header > .row { flex-wrap: nowrap; align-items: center; }
    /* En celular este panel ya no muestra nada (el menú del tema está oculto y la
       hamburguesa vive junto al logo, Ui\MobileHeaderOrder): fuera, para que el logo
       y la hamburguesa ocupen todo el ancho. */
    .header-inner-page-wrap .header-right-panel { display: none !important; }
    .header-inner-page-wrap .lp-logo-container { flex: 1 1 auto; width: 100%; }
}

/* ¿Qué es Bindy? (Jorge, 26-sep): WordPress mete <br> entre los botones y
   separaba de más; menos espacio y texto centrado aunque ocupe 2 renglones. */
.bindy-que-es .qe-ctas br{display:none}
.bindy-que-es .qe-ctas{gap:10px !important}
.bindy-que-es .qe-ctas .qe-btn{text-align:center}