/* Dynamic pricing for PMPro CSS - VERSIÓN COMPLETA OPTIMIZADA v2.1 */

/* ====================================================================
   RESET Y BASE
   ==================================================================== */

/* Prevenir desbordamiento horizontal global */
* {
    box-sizing: border-box !important;
}

body {
    overflow-x: hidden !important;
}

/* ====================================================================
   ESTILOS GENERALES DEL FORMULARIO
   ==================================================================== */

#total_price_display {
    background-color: #edf5f9 !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    cursor: default !important;
    pointer-events: none !important;
    color: #2d5a87 !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 12px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

.pmpro_account-profile-field {
    margin: 20px 0 !important;
    padding: 15px !important;
    background: #f8f8f8 !important;
    border-radius: 5px !important;
    border-left: 4px solid #2d9cdb !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.pmpro_nextcloud_config_details p {
    margin: 8px 0 !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.pmpro_nextcloud_config_details h3 {
    color: #2d5a87 !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid #e0e0e0 !important;
    padding-bottom: 8px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ====================================================================
   CONTENEDORES PRINCIPALES - CORRECCIÓN PARA MÓVILES
   ==================================================================== */

/* Contenedor principal del formulario */
#pmpro_checkout,
.pmpro_checkout,
.pmpro_billing,
.pmpro_account {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Fieldsets responsive */
fieldset {
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

fieldset legend {
    max-width: calc(100% - 20px) !important;
    padding: 0 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

/* Campos individuales */
.pmpro_checkout-field,
.pmpro_billing-field,
.pmpro_account-field {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin: 15px 0 !important;
    padding: 0 !important;
}

/* ====================================================================
   SELECTS - OPTIMIZADOS PARA MÓVILES
   ==================================================================== */

/* Base para todos los selects con flecha única */
#storage_space, 
#office_suite, 
#payment_frequency,
select#office_suite,
select#storage_space,
select#payment_frequency {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 12px 40px 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
    
    /* Remover estilos nativos */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    
    /* Flecha personalizada única */
    background-color: white !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='m0 0 2 2 2-2z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px !important;
}

/* Selectores con máxima especificidad */
html body .pmpro_checkout-field select,
html body .pmpro_billing-field select,
html body .pmpro_account-field select,
html body #office_suite,
html body #storage_space,
html body #payment_frequency,
body .pmpro_checkout-field select#office_suite,
body .pmpro_billing-field select#office_suite,
body .pmpro_account-field select#office_suite {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='m0 0 2 2 2-2z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px !important;
    background-color: #cadbe6 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #777 !important;
}

/* Estados de focus */
#storage_space:focus, 
#office_suite:focus, 
#payment_frequency:focus {
    border-color: #2d9cdb !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(45, 156, 219, 0.1) !important;
}

/* ====================================================================
   OPCIONES DEL SELECT
   ==================================================================== */

#office_suite option,
#storage_space option,
#payment_frequency option {
    padding: 10px 15px !important;
    white-space: normal !important;
    overflow: visible !important;
    min-height: 40px !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    -webkit-text-size-adjust: none !important;
    -moz-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
    text-size-adjust: none !important;
}

/* Opciones deshabilitadas */
#storage_space option:disabled, 
#office_suite option:disabled,
#payment_frequency option:disabled {
    color: #999 !important;
    background-color: #f5f5f5 !important;
}

/* ====================================================================
   CAMPO DE SUITE OFIMÁTICA CON BORDE
   ==================================================================== */

.pmpro_checkout-field-office-suite.bordered-field {
    border: 1px solid #2d9cdb !important;
    border-radius: 8px !important;
    padding: 16px !important;
    background-color: #f9fbff !important;
    margin: 20px 0 !important;
    position: relative !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.pmpro_checkout-field-office-suite.bordered-field label {
    font-weight: 600 !important;
    color: #2d5a87 !important;
    display: block !important;
    position: relative !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ====================================================================
   SISTEMA DE TOOLTIPS
   ==================================================================== */

.pmpro-tooltip-trigger {
    color: #2d9cdb !important;
    cursor: help !important;
    font-size: 22px !important;
    vertical-align: top !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

.pmpro-tooltip-trigger:hover {
    color: #1e6091 !important;
    transform: scale(1.1) !important;
}

.pmpro-tooltip {
    position: absolute !important;
    background-color: #333 !important;
    color: white !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    width: 400px !important;
    max-width: 95vw !important;
    z-index: 10001 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    text-align: left !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.pmpro-tooltip p {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.pmpro-tooltip p:last-child {
    margin-bottom: 0 !important;
}

.pmpro-tooltip strong {
    color: #fff !important;
    font-weight: 600 !important;
    display: inline !important;
}

/* ====================================================================
   MENSAJES DE ALERTA
   ==================================================================== */

.pmpro_message {
    padding: 12px 16px !important;
    margin: 16px 0 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.pmpro_message.pmpro_error {
    background-color: #fdf2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
}

/* ====================================================================
   BREAKPOINT TABLET (768px)
   ==================================================================== */

@media (max-width: 768px) {
    /* Contenedor principal más compacto */
    fieldset {
        padding: 12px 8px !important;
    }
    
    fieldset legend {
        font-size: 15px !important;
        max-width: calc(100% - 16px) !important;
        padding: 0 8px !important;
    }
    
    .pmpro_checkout-field,
    .pmpro_billing-field,
    .pmpro_account-field {
        margin: 12px 0 !important;
        padding: 0 5px !important;
    }
    
    /* Selects responsive */
    #storage_space, 
    #office_suite, 
    #payment_frequency,
    select#storage_space,
    select#office_suite,
    select#payment_frequency {
        padding: 10px 35px 10px 12px !important;
        font-size: 14px !important;
        background-size: 11px !important;
        background-position: right 12px center !important;
    }
    
    #office_suite option,
    #storage_space option,
    #payment_frequency option {
        font-size: 13px !important;
        padding: 8px 12px !important;
        min-height: 35px !important;
        line-height: 1.3 !important;
    }
    
    /* Campo de precio responsive */
    #total_price_display {
        font-size: 18px !important;
        padding: 10px !important;
    }
    
    /* Sección bordered-field responsive */
    .pmpro_checkout-field-office-suite.bordered-field {
        padding: 12px !important;
        margin: 15px 0 !important;
        border-radius: 6px !important;
    }
    
    .pmpro_checkout-field-office-suite.bordered-field label {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    /* Tooltips responsive */
    .pmpro-tooltip {
        width: 350px !important;
        max-width: calc(100vw - 20px) !important;
        font-size: 13px !important;
        padding: 14px 16px !important;
        line-height: 1.5 !important;
    }
    
    .pmpro-tooltip-trigger {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
        margin-left: 6px !important;
    }
}

/* ====================================================================
   BREAKPOINT MÓVIL (480px)
   ==================================================================== */

@media (max-width: 480px) {
    /* Reset completo para móviles */
    body {
        overflow-x: hidden !important;
    }
    
    /* Contenedores ultra compactos */
    fieldset {
        padding: 8px 5px !important;
        margin: 0 !important;
    }
    
    fieldset legend {
        font-size: 14px !important;
        max-width: calc(100vw - 30px) !important;
        padding: 0 5px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .pmpro_checkout-field,
    .pmpro_billing-field,
    .pmpro_account-field {
        margin: 8px 0 !important;
        padding: 0 2px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Selects móviles */
    #storage_space, 
    #office_suite, 
    #payment_frequency,
    select#storage_space,
    select#office_suite,
    select#payment_frequency {
        padding: 8px 30px 8px 10px !important;
        font-size: 13px !important;
        background-size: 10px !important;
        background-position: right 10px center !important;
        min-height: 40px !important;
    }
    
    #office_suite option,
    #storage_space option,
    #payment_frequency option {
        font-size: 12px !important;
        padding: 6px 10px !important;
        min-height: 32px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Campo de precio móvil */
    #total_price_display {
        font-size: 16px !important;
        padding: 8px !important;
        text-align: center !important;
    }
    
    /* Sección bordered-field móvil */
    .pmpro_checkout-field-office-suite.bordered-field {
        padding: 8px !important;
        margin: 10px 0 !important;
        border-radius: 4px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .pmpro_checkout-field-office-suite.bordered-field label {
        font-size: 16px !important;
        margin-bottom: 6px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Tooltips móviles */
    .pmpro-tooltip {
        width: 300px !important;
        max-width: calc(100vw - 10px) !important;
        font-size: 12px !important;
        padding: 12px 14px !important;
        line-height: 1.4 !important;
        left: 5px !important;
        right: 5px !important;
    }
    
    .pmpro-tooltip-trigger {
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin-left: 4px !important;
    }
    
    /* Labels más compactos */
    .pmpro_checkout-field label,
    .pmpro_billing-field label,
    .pmpro_account-field label {
        font-size: 13px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        margin-bottom: 6px !important;
    }
    
    /* Mensajes de alerta móviles */
    .pmpro_message {
        padding: 8px 10px !important;
        margin: 10px 0 !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }
    
    /* Profile fields móviles */
    .pmpro_account-profile-field {
        margin: 10px 0 !important;
        padding: 10px !important;
    }
}

/* ====================================================================
   BREAKPOINT PANTALLAS MUY PEQUEÑAS (360px)
   ==================================================================== */

@media (max-width: 360px) {
    /* Ultra compacto para pantallas pequeñas */
    fieldset {
        padding: 5px 3px !important;
    }
    
    fieldset legend {
        font-size: 13px !important;
        max-width: calc(100vw - 20px) !important;
        padding: 0 3px !important;
    }
    
    .pmpro_checkout-field,
    .pmpro_billing-field,
    .pmpro_account-field {
        padding: 0 1px !important;
        margin: 6px 0 !important;
    }
    
    /* Selects ultra compactos */
    #storage_space, 
    #office_suite, 
    #payment_frequency,
    select#storage_space,
    select#office_suite,
    select#payment_frequency {
        padding: 6px 25px 6px 8px !important;
        font-size: 12px !important;
        background-size: 8px !important;
        background-position: right 8px center !important;
        min-height: 36px !important;
    }
    
    #office_suite option,
    #storage_space option,
    #payment_frequency option {
        font-size: 11px !important;
        padding: 4px 8px !important;
        min-height: 28px !important;
        line-height: 1.2 !important;
    }
    
    /* Campo de precio ultra compacto */
    #total_price_display {
        font-size: 14px !important;
        padding: 6px !important;
    }
    
    /* Sección bordered-field ultra compacta */
    .pmpro_checkout-field-office-suite.bordered-field {
        padding: 6px !important;
        margin: 8px 0 !important;
    }
    
    .pmpro_checkout-field-office-suite.bordered-field label {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    /* Tooltips ultra pequeños */
    .pmpro-tooltip {
        width: 280px !important;
        max-width: calc(100vw - 5px) !important;
        font-size: 11px !important;
        padding: 10px 12px !important;
        left: 2px !important;
        right: 2px !important;
    }
    
    .pmpro-tooltip-trigger {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Labels ultra compactos */
    .pmpro_checkout-field label,
    .pmpro_billing-field label,
    .pmpro_account-field label {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }
}

/* ====================================================================
   PREVENIR INTERFERENCIAS DE NAVEGADORES
   ==================================================================== */

/* Webkit */
select#office_suite::-ms-expand,
select#storage_space::-ms-expand,
select#payment_frequency::-ms-expand {
    display: none !important;
}

/* Internet Explorer */
select#office_suite::-ms-dropdown,
select#storage_space::-ms-dropdown,
select#payment_frequency::-ms-dropdown {
    display: none !important;
}

/* Firefox */
select#office_suite:-moz-focusring,
select#storage_space:-moz-focusring,
select#payment_frequency:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 #000 !important;
}

/* ====================================================================
   ESTADOS ESPECIALES
   ==================================================================== */

/* Selects disabled */
#storage_space:disabled,
#office_suite:disabled,
#payment_frequency:disabled {
    background-color: #f5f5f5 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23999' d='m0 0 2 2 2-2z'/></svg>") !important;
}

/* Estados de validación */
.pmpro_checkout-field.pmpro_error select {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1) !important;
}

.pmpro_checkout-field.pmpro_error select:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

/* ====================================================================
   COMPATIBILIDAD CON TEMAS Y PAGE BUILDERS
   ==================================================================== */

/* Astra Theme */
.ast-container .pmpro_checkout-field,
.ast-container .pmpro_billing-field,
.ast-container .pmpro_account-field {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.ast-container select#office_suite,
.ast-container select#storage_space,
.ast-container select#payment_frequency {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='m0 0 2 2 2-2z'/></svg>") !important;
}

/* Elementor */
.elementor .pmpro_checkout-field,
.elementor .pmpro_billing-field,
.elementor .pmpro_account-field,
.elementor-widget .pmpro_checkout-field {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.elementor select#office_suite,
.elementor select#storage_space,
.elementor select#payment_frequency {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='m0 0 2 2 2-2z'/></svg>") !important;
}

/* GeneratePress */
.site-content .pmpro_checkout-field,
.entry-content .pmpro_checkout-field,
.main-content .pmpro_checkout-field {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.site-content select#office_suite,
.site-content select#storage_space,
.site-content select#payment_frequency {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='m0 0 2 2 2-2z'/></svg>") !important;
}

/* Divi Theme */
.et_pb_row .pmpro_checkout-field,
.et_pb_column .pmpro_checkout-field {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Avada Theme */
.fusion-builder-row .pmpro_checkout-field,
.fusion-layout-column .pmpro_checkout-field {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* ====================================================================
   LIMPIAR ESTILOS CONFLICTIVOS
   ==================================================================== */

/* Remover pseudo-elementos que puedan crear flechas adicionales */
select#office_suite::after,
select#office_suite::before,
select#storage_space::after,
select#storage_space::before,
select#payment_frequency::after,
select#payment_frequency::before {
    display: none !important;
    content: none !important;
}

/* Background consistente */
select#office_suite,
select#storage_space,
select#payment_frequency {
    background-attachment: scroll !important;
    background-clip: padding-box !important;
    background-origin: padding-box !important;
}

/* ====================================================================
   UTILITIES Y DEBUG
   ==================================================================== */

/* Clase utility para forzar responsive */
.pmpro-force-responsive {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Debug clase (remover en producción) */
.pmpro-debug-mobile {
    outline: 2px solid red !important;
}

/* Prevenir zoom en iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select#office_suite,
    select#storage_space,
    select#payment_frequency {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    /* Mantener 16px mínimo en iOS para prevenir zoom */
    select#office_suite,
    select#storage_space,
    select#payment_frequency {
        font-size: 16px !important;
    }
}

/* ====================================================================
   ACCESIBILIDAD
   ==================================================================== */

/* Focus visible mejorado */
#storage_space:focus-visible,
#office_suite:focus-visible,
#payment_frequency:focus-visible {
    outline: 2px solid #2d9cdb !important;
    outline-offset: 2px !important;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .pmpro-tooltip {
        background-color: #000 !important;
        border: 2px solid #fff !important;
    }
    
    .pmpro_checkout-field-office-suite.bordered-field {
        border-width: 2px !important;
        border-color: #000 !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pmpro-tooltip-trigger {
        transition: none !important;
    }
    
    .pmpro-tooltip {
        transition: none !important;
    }
}