/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jan 21 2026 | 01:59:38 */
/**
 * ADD LISTING PACKAGES STYLE ("Paquetes Addlistings")
 * Based on User Snippet + Black/Grey Pricing Cosmetics
 */

/* =========================================
   1. CORRECCIÓN DE ANCHO (Full Width REFORZADO)
   ========================================= */
.site-main,
.entry-content,
.page-content,
#content,
.page-header {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.directorist-container-fluid {
    padding: 0 40px !important;
    /* Un poco de aire a los lados */
}

/* =========================================
   2. ESTILO DEL INTERRUPTOR (SWITCH - FORZADO)
   ========================================= */
/* Contenedor Flotante Bonito */
div.pricing-toggle-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 40px auto 60px !important;
    gap: 20px !important;
    background: #fff !important;
    padding: 15px 30px !important;
    border-radius: 50px !important;
    width: fit-content !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #eef2f7 !important;
    position: relative;
    z-index: 10;
    font-family: 'Montserrat', sans-serif !important;
}

/* Textos (Mensual / Anual) */
span.toggle-label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #999 !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    font-family: inherit !important;
}

span.toggle-label.active {
    color: #154178 !important;
    /* Azul oscuro activo */
}

/* EL SWITCH (La parte clave) */
label.switch {
    position: relative !important;
    display: inline-block !important;
    width: 60px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Ocultar el checkbox feo nativo */
label.switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* La pastilla deslizante */
span.slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #e2e6ea !important;
    transition: .4s !important;
    border-radius: 34px !important;
}

/* La bolita blanca */
span.slider:before {
    position: absolute !important;
    content: "" !important;
    height: 26px !important;
    width: 26px !important;
    left: 4px !important;
    bottom: 4px !important;
    background-color: white !important;
    transition: .4s !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* Estado Activo (Azul) */
label.switch input:checked+span.slider {
    background-color: #154178 !important;
}

label.switch input:checked+span.slider:before {
    transform: translateX(26px) !important;
}

/* Badge Ahorro */
span.save-badge {
    background: #FFC107 !important;
    color: #154178 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    position: absolute !important;
    top: -18px !important;
    right: -10px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* =========================================
   3. TARJETAS (Ajustes finales)
   ========================================= */
.directorist-row.directorist-justify-content-center {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 30px !important;
}

.directorist-col-md-4 {
    flex: 1 1 300px !important;
    max-width: 380px !important;
    min-width: 280px !important;
    margin: 0 !important;
    /* Prevenir márgenes extraños */
}

/* Asegurar que el contenido se ve limpio */
.directorist-pricing {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.directorist-pricing__action {
    margin-top: auto !important;
}

/* =========================================
   ORDENAMIENTO FORZADO DE TARJETAS
   ========================================= */

/* 1. PLAN GRATIS ("Free Basic") - SIEMPRE PRIMERO */
.atpp_free {
    order: 1 !important;
}

/* 2. PLAN PLUS (Mensual y Anual) - SIEMPRE SEGUNDO */
.atpp_plus,
.plus {
    order: 2 !important;
}

/* 3. PLAN PREMIUM (Mensual y Anual) - SIEMPRE TERCERO */
.atpp_premium,
.premium {
    order: 3 !important;
}

/* Asegurar que el contenedor use Flexbox para que 'order' funcione */
/* (Ya lo tenemos, pero por seguridad) */
.directorist-row.directorist-justify-content-center {
    display: flex !important;
}

/* 1. QUE CADA TARJETA TENGA SU PROPIA ALTURA (No estirar) */
.directorist-row.directorist-justify-content-center {
    align-items: flex-start !important;
    /* CLAVE: Alinearse arriba, no estirarse */
    padding-bottom: 80px !important;
    /* Margen generoso con el footer */
}

/* 2. QUITAR ALTURA FORZADA DE LAS TARJETAS */
.directorist-pricing {
    height: auto !important;
    /* Dejar que el contenido defina la altura */
    min-height: auto !important;
}

/* 3. ARREGLAR BOTÓN "CONTINUAR" EN EL PLAN CORTO */
/* Como ya no se estira, no necesitamos margin-top: auto, pero por si acaso */
.directorist-pricing__features {
    flex-grow: 0 !important;
    /* No intentar llenar espacio vacío */
}

/* =========================================
   4. COSMETICS (BLACK PRICES & GREY SYMBOLS)
   ========================================= */

.directorist-pricing__value {
    color: #000000 !important;
    /* Black Price */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

.directorist-pricing__value sup {
    color: #9aa5b1 !important;
    /* Muted Blue-Grey Symbol */
    font-weight: 700 !important;
}