/*
** modal-style.css
** Sistema base de modales: ocultar/mostrar, overlay, variantes side y center.
** Trigger: [data-modal-open="#id"] con clase ymk-dialogo
*/

/* ── Base oculto ─────────────────────────────────────────────────────────── */

.cover-modal {
    display: none;
    opacity: 1;
    transition: background-color 0.3s ease-in, left 0s 0.3s, right 0s 0.3s;
}

.cover-modal.show-modal {
    display: flex;
}

.cover-modal.active {
    background: rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease-out;
}

/* ── Offcanvas lateral (.side) ───────────────────────────────────────────── */

.cover-modal.side {
    position: fixed;
    top: 0; bottom: 0;
    left: -99999rem; right: 99999rem;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.25s ease-in, left 0s 0.25s, right 0s 0.25s;
}

.cover-modal.side.active {
    left: 0; right: 0;
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

.cover-modal.side > * {
    width: 31rem;
    background: white;
    overflow: auto;
    box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
    transform: translateX(20rem);
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.cover-modal.side.active > * {
    transform: translateX(0);
    transition-timing-function: ease-out;
}

/* ── Lightbox centrado (.center) ─────────────────────────────────────────── */

.cover-modal.center {
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.25s ease-in;
}

.cover-modal.center.active {
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

.cover-modal.center > * {
    background: white;
    border-radius: 6px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(16px);
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
    opacity: 0;
    position: relative;
}

.cover-modal.center.active > * {
    transform: translateY(0);
    opacity: 1;
    transition-timing-function: ease-out;
}

/* ── Botón cerrar ────────────────────────────────────────────────────────── */

.cover-modal .close-nav-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    line-height: 0;
    padding: 0.5rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: currentColor;
    z-index: 1;
}

.cover-modal .close-nav-toggle:hover {
    background: rgba(0, 0, 0, 0.07);
}

/* ── Trigger ymk-dialogo ─────────────────────────────────────────────────── */

.ymk-dialogo,
p.ymk-dialogo a,
.saber-mas a {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    cursor: pointer;
    text-decoration: none !important;
    color: var(--wp--preset--color--buttonback);
}

.ymk-dialogo:hover,
.saber-mas a:hover {
    color: var(--wp--preset--color--buttonacti);
}

.saber-mas a::after {
    content: "\e5cc";
    font-family: 'Material Icons Outlined';
    color: currentColor;
}

/* ── no-scroll ───────────────────────────────────────────────────────────── */

html.no-scroll {
    overflow: hidden;
}

/* ── Anchor modal — contenido oculto en página ───────────────────────────── */

.ymk-anchor-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.25s ease-in;
}

.ymk-anchor-modal.active {
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

.ymk-anchor-modal .cover-modal-inner {
    background: #fff;
    border-radius: 6px;
    width: 100%;
    max-width: var(--responsive--aligndefault-width, 610px);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    padding: 2.5rem 2rem 2rem;
    position: relative;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.ymk-anchor-modal .cover-modal-inner.modal-wide {
    max-width: var(--responsive--alignwide-width, 1240px);
}

.ymk-anchor-modal .cover-modal-inner.modal-full {
    max-width: var(--responsive--alignfull-width, 100%);
    border-radius: 0;
    padding: 0;
}

.ymk-anchor-modal.active .cover-modal-inner {
    transform: translateY(0);
    opacity: 1;
    transition-timing-function: ease-out;
}

/* ── FAQ modal via REST ──────────────────────────────────────────────────── */

.ymk-faq-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.25s ease-in;
}

.ymk-faq-modal.active {
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

.ymk-faq-modal .cover-modal-inner {
    background: #fff;
    border-radius: 6px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,.2);
    padding: 2.5rem 2rem 2rem;
    position: relative;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

.ymk-faq-modal.active .cover-modal-inner {
    transform: translateY(0);
    opacity: 1;
    transition-timing-function: ease-out;
}

.ymk-faq-modal__body h2 {
    margin-top: 0;
}

.ymk-faq-loading {
    text-align: center;
    padding: 2rem;
    color: #888;
}