/**
 * Dynasty Luxury Rentals — Footer + WhatsApp float
 * Grid de 8 columnas con 2 vacías en el medio (4-5) — para separar el bloque
 * izquierdo (brands / locations / experiences) del derecho (contact / faqs / blog).
 */

.dynasty-footer {
    background: var(--dynasty-black-obsidian, #0A0A0A) !important;
    color: var(--dynasty-white, #FFFFFF) !important;
    padding-top: 80px;
}

.dynasty-footer__inner {
    display: grid !important;
    gap: 40px !important;
    grid-template-columns: 1fr !important;
    padding-bottom: 64px;
}

@media (min-width: 600px) {
    .dynasty-footer__inner {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Desktop: 6 tracks de ancho explícito (no 1fr parejo) — Locations necesita
   mucho más espacio que el resto desde que tiene 41 ciudades en 3
   sub-columnas (ver .dynasty-footer__col--locations .dynasty-footer__list
   más abajo). Orden pedido por el cliente 2026-07-10: Brands → Experiences →
   Locations → Contact → FAQs → Blog (antes era Brands → Locations →
   Experiences). El orden visual lo da grid-column acá, no el orden en el DOM
   (footer.php los emite Brands/Experiences/Locations por legibilidad, pero
   igual hace falta el grid-column explícito por los estados mobile/tablet). */
@media (min-width: 1024px) {
    .dynasty-footer__inner {
        grid-template-columns: 2fr 1.1fr 3.4fr 1.6fr 0.8fr 0.8fr !important;
        gap: 30px !important;
    }
    .dynasty-footer__col--brands    { grid-column: 1; }
    .dynasty-footer__col--exp       { grid-column: 2; }
    .dynasty-footer__col--locations { grid-column: 3; }
    .dynasty-footer__col--contact   { grid-column: 4; }
    .dynasty-footer__col--faqs      { grid-column: 5; }
    .dynasty-footer__col--blog      { grid-column: 6; }
}

/* Locations: 41 ciudades fluyendo en 3 sub-columnas (como Popular brands en
   2, pero acá son 3 porque son muchas más). `column-count` en vez de grid
   para que la lista se auto-reparta (llena la col 1 completa, sigue en la 2,
   etc.) sin tener que partir el array en PHP. Pisa el `display:flex` de
   `.dynasty-footer__list` porque multi-column no aplica sobre flex.
   Espaciado calcado de `.dynasty-footer__list--two-col` (Popular brands,
   `gap: 10px 22px`) — mismo 10px vertical (acá vía margin-bottom, multi-column
   no soporta row-gap) y mismo 22px horizontal. Pedido del cliente 2026-07-10. */
@media (min-width: 1024px) {
    .dynasty-footer__col--locations .dynasty-footer__list {
        display: block !important;
        column-count: 3;
        column-gap: 22px;
    }
    .dynasty-footer__col--locations .dynasty-footer__list > li {
        break-inside: avoid;
        /* OJO: `.dynasty-footer__list > li { margin: 0 !important; }` (más abajo
           en este archivo) le gana a cualquier margin sin !important, sin
           importar especificidad — hace falta acá también. Bug real: la
           primera versión de este ajuste (sin !important) nunca se aplicó. */
        margin-bottom: 10px !important;
    }
}

.dynasty-footer__col { min-width: 0; }

/* Columna de Contact Us: heading + correo + teléfonos arriba (pegados entre
   sí, flujo natural); redes sociales pegadas abajo, usando el alto extra que
   deja Locations (la columna más alta del footer, 41 ciudades). Ajustado en
   2 pasos 2026-07-10: primero se sacó el `margin-bottom: auto` del heading
   (empujaba TODO el bloque al fondo, dejando un hueco enorme entre el
   heading y el correo). Con eso el correo/teléfonos quedaban arriba pero las
   redes también — el pedido real era que las redes SÍ bajen al fondo, solo
   que sin arrastrar correo/teléfonos con ellas. `margin-top: auto` movido a
   `.dynasty-footer__social` en vez del heading logra exactamente eso. */
.dynasty-footer__col--contact {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}
.dynasty-footer__col--contact .dynasty-footer__social {
    margin-top: auto !important;
}

/* === Heading dorado de cada columna === */
.dynasty-footer__heading {
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: 20px !important;
    font-weight: var(--dynasty-fw-bold, 700) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--dynasty-brand-gold, #D4AF37) !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
.dynasty-footer__heading a {
    color: inherit !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}
.dynasty-footer__heading a:hover { opacity: 0.85; }

/* === Listas de items (brands / locations / experiences) ===
   IMPORTANTE: Cartsy parent y los plugins (WPML, RnB, etc.) suelen agregar
   margin/padding a `.menu-item` que estaba inflando el espacio entre items.
   Reset explícito de `li` y de las clases que WP agrega automáticamente. */
.dynasty-footer__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
/* Variante 2 columnas (marcas: todas en doble fila). */
.dynasty-footer__list--two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 22px !important;
}
.dynasty-footer__list > li,
.dynasty-footer__list > .menu-item {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
}
.dynasty-footer__list > li::before,
.dynasty-footer__list > li::marker,
.dynasty-footer__list > .menu-item::before {
    content: none !important;
    display: none !important;
}
.dynasty-footer__list a {
    display: inline-block !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 14px !important;
    font-weight: var(--dynasty-fw-regular, 400) !important;
    color: var(--dynasty-white, #FFFFFF) !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: color 0.2s ease;
}
.dynasty-footer__list a:hover {
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}

/* === Contact: email + phone con icono. Items tight, 10px entre ellos. === */
.dynasty-footer__contact {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.dynasty-footer__contact > li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
}
.dynasty-footer__contact > li::before,
.dynasty-footer__contact > li::marker {
    content: none !important;
    display: none !important;
}
.dynasty-footer__contact a {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 14px !important;
    font-weight: var(--dynasty-fw-regular, 400) !important;
    color: var(--dynasty-white, #FFFFFF) !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: color 0.2s ease;
}
.dynasty-footer__contact a:hover {
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}
.dynasty-footer__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--dynasty-white, #FFFFFF);
    flex: 0 0 18px;
}

/* === Social icons (cajitas outlined). === */
.dynasty-footer__social {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 10px !important;
}
.dynasty-footer__social > li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
}
.dynasty-footer__social > li::before,
.dynasty-footer__social > li::marker {
    content: none !important;
    display: none !important;
}
.dynasty-footer__social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 6px !important;
    color: var(--dynasty-white, #FFFFFF) !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.dynasty-footer__social a:hover {
    background: var(--dynasty-brand-gold, #D4AF37) !important;
    border-color: var(--dynasty-brand-gold, #D4AF37) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
}

/* === Bottom bar — copyright a la izq, links legales a la der === */
.dynasty-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-block: 22px;
}
.dynasty-footer__bar-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}
.dynasty-footer__copy {
    margin: 0 !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.55) !important;
}
.dynasty-footer__credit {
    color: rgba(255, 255, 255, 0.4) !important;
}
.dynasty-footer__credit::before {
    content: "·";
    margin: 0 8px !important;
    color: rgba(255, 255, 255, 0.3) !important;
}
.dynasty-footer__credit a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    font-weight: var(--dynasty-fw-medium, 500) !important;
    transition: color 0.2s ease;
}
.dynasty-footer__credit a:hover {
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}
.dynasty-footer__legal {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 36px !important;
    flex-wrap: wrap !important;
}
.dynasty-footer__legal > li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
}
.dynasty-footer__legal > li::before,
.dynasty-footer__legal > li::marker {
    content: none !important;
    display: none !important;
}
.dynasty-footer__legal a {
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 13px !important;
    font-weight: var(--dynasty-fw-regular, 400) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.dynasty-footer__legal a:hover {
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}

/* ==========================================================================
   Mobile (< 768) — reorden completo + accordion en brands/locations/exp
   ========================================================================== */

@media (max-width: 767px) {

    /* Flatten todas las columnas para que sus children sean items directos
       del flex del inner, y así poder reordenarlos individualmente. */
    .dynasty-footer__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding-bottom: 48px;
    }
    .dynasty-footer__col {
        display: contents !important;
    }

    /* Sección 1: Contact Us / FAQs / Blog → arriba como heading-links. */
    .dynasty-footer__col--contact > .dynasty-footer__heading {
        order: 1;
        margin: 0 0 14px !important;
    }
    .dynasty-footer__col--faqs > .dynasty-footer__heading {
        order: 2;
        margin: 0 0 14px !important;
    }
    .dynasty-footer__col--blog > .dynasty-footer__heading {
        order: 3;
        margin: 0 0 40px !important;
    }

    /* Sección 2: Brands / Locations / Experiences como acordeones. */
    .dynasty-footer__col--brands    > .dynasty-footer__heading { order: 4; }
    .dynasty-footer__col--brands    > .dynasty-footer__list    { order: 5; }
    .dynasty-footer__col--locations > .dynasty-footer__heading { order: 6; }
    .dynasty-footer__col--locations > .dynasty-footer__list    { order: 7; }
    .dynasty-footer__col--exp       > .dynasty-footer__heading { order: 8; }
    .dynasty-footer__col--exp       > .dynasty-footer__list    { order: 9; }

    /* Heading accordion: clickable + chevron. */
    .dynasty-footer__col--brands    > [data-accordion-toggle],
    .dynasty-footer__col--locations > [data-accordion-toggle],
    .dynasty-footer__col--exp       > [data-accordion-toggle] {
        position: relative;
        cursor: pointer;
        padding: 18px 32px 18px 0 !important;
        margin: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        user-select: none;
    }
    .dynasty-footer__col--exp > [data-accordion-toggle] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .dynasty-footer__col--brands    > [data-accordion-toggle]::after,
    .dynasty-footer__col--locations > [data-accordion-toggle]::after,
    .dynasty-footer__col--exp       > [data-accordion-toggle]::after {
        content: '';
        position: absolute;
        right: 4px;
        top: 50%;
        width: 12px;
        height: 12px;
        margin-top: -6px;
        border-right: 2px solid var(--dynasty-brand-gold, #D4AF37);
        border-bottom: 2px solid var(--dynasty-brand-gold, #D4AF37);
        transform: rotate(45deg);
        transform-origin: center;
        transition: transform 0.3s ease;
    }
    .dynasty-footer__col--brands.is-open    > [data-accordion-toggle]::after,
    .dynasty-footer__col--locations.is-open > [data-accordion-toggle]::after,
    .dynasty-footer__col--exp.is-open       > [data-accordion-toggle]::after {
        transform: rotate(-135deg);
        margin-top: -3px;
    }

    /* Lista oculta por default, aparece al abrir. */
    .dynasty-footer__col--brands    > .dynasty-footer__list,
    .dynasty-footer__col--locations > .dynasty-footer__list,
    .dynasty-footer__col--exp       > .dynasty-footer__list {
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    .dynasty-footer__col--brands.is-open    > .dynasty-footer__list,
    .dynasty-footer__col--locations.is-open > .dynasty-footer__list,
    .dynasty-footer__col--exp.is-open       > .dynasty-footer__list {
        max-height: 600px !important;
        opacity: 1 !important;
        padding: 4px 0 18px 0 !important;
    }

    /* Sección 3: Contact items (email, phone) + social al fondo. */
    .dynasty-footer__col--contact > .dynasty-footer__contact {
        order: 10;
        margin: 40px 0 0 !important;
    }
    .dynasty-footer__col--contact > .dynasty-footer__social {
        order: 11;
        margin: 22px 0 0 !important;
    }

    /* Reset el margin-bottom: auto del heading de contact (era para empujar
       items al fondo en desktop; en mobile no aplica). */
    .dynasty-footer__col--contact > .dynasty-footer__heading {
        margin-bottom: 14px !important;
    }
    .dynasty-footer__col--contact {
        justify-content: initial !important;
    }
}

/* Bottom bar en mobile: stacked, copy arriba, legal abajo. */
@media (max-width: 600px) {
    .dynasty-footer__bar-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 18px !important;
        text-align: center !important;
    }
    .dynasty-footer__legal {
        justify-content: center !important;
        gap: 22px !important;
    }
}

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */

.dynasty-whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 950;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dynasty-whatsapp-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.45), 0 6px 10px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
    .dynasty-whatsapp-float {
        right: 32px;
        bottom: 32px;
        width: 64px;
        height: 64px;
    }
}