/* Estilos generales del contenedor principal del plugin */
.mpc-calculator-container {
    /* --- Variables CSS para personalización de fuentes --- */
    /* Estas variables pueden ser sobrescritas en la pestaña "CSS Personalizado" del admin */
    --font-size-h2: 1.8em;        /* Para el título principal h2 */
    --font-size-h3: 1.5em;        /* Para "Complementos Adicionales" h3 */
    --font-size-h4: 1.1em;        /* Para "Régimen de Alojamiento" h4 */
    --font-size-label: 1em;       /* Para las etiquetas de input/select */
    --font-size-price-label: 1.2em; /* Para "El precio estimado de tu viaje es:" */
    --font-size-final-price: 2.8em; /* Para el precio final */
    --font-size-disclaimer: 0.95em; /* Para el texto de descargo de responsabilidad */
    --font-size-addons-label: 1em; /* Para las etiquetas de complementos/regimen */
    --button-bg-color: #007bff; /* Color de fondo del botón */
    --button-text-color: #ffffff; /* Color del texto del botón */
    --button-hover-bg-color: #0056b3; /* Color de fondo del botón al pasar el ratón */
    /* --- Fin Variables CSS --- */

    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    padding: 35px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    color: #333;
    border: 1px solid #eee;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Asegura que h2, content-wrapper y botón se apilen */
    align-items: center; /* Centra los elementos a lo largo del eje transversal */
}

/* Título de la calculadora */
.mpc-calculator-container h2 {
    width: 100%;
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
    font-size: var(--font-size-h2); /* Usando la variable CSS */
    font-weight: 600;
}

/* Contenedor Flex para las dos columnas (formulario y resultado) */
.mpc-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
}

/* Columna izquierda: Controles de la calculadora */
.mpc-left-column {
    flex: 2;
    min-width: 380px; /* Asegura un ancho mínimo para una buena visualización */
    box-sizing: border-box;
}

/* Columna derecha: Solo el resultado y el botón */
.mpc-right-column {
    flex: 1;
    min-width: 280px; /* Ancho mínimo para el resultado */
    display: flex;
    flex-direction: column; /* Apila el resultado y el botón */
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Estilos para el formulario */
#mpc-calculator-form {
    width: 100%;
}

/* Grupos individuales de formulario (label + input/select) */
.mpc-form-group {
    margin-bottom: 25px;
}

.mpc-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
    font-size: var(--font-size-label); /* Usando la variable CSS */
}

/* Campos de entrada y select */
.mpc-form-group input[type="number"],
.mpc-form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font-size: var(--font-size-label); /* Usando la variable CSS */
    color: #333;
    background-color: #f9f9f9;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: 48px;
    -webkit-appearance: none; /* Eliminar estilos predeterminados de navegador */
    -moz-appearance: none;
    appearance: none;
    /* Flecha personalizada para el select */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%23333" d="M0 0l5 6 5-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px 6px;
}

.mpc-form-group input[type="number"]:focus,
.mpc-form-group select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Estilos para la sección de complementos (checkboxes y radio buttons) */
.mpc-addons {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 30px;
}

/* Estilos para "Complementos Adicionales" (h3) */
.mpc-addons h3 {
    font-size: var(--font-size-h3); /* Usando la variable CSS */
    color: #007bff;
    margin-bottom: 20px;
    font-weight: 700;
    text-align: left;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

/* Estilo para "Régimen de Alojamiento" (h4) */
.mpc-addons h4 {
    font-size: var(--font-size-h4); /* Usando la variable CSS */
    color: #444;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: 600;
}

.mpc-addons label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-weight: normal;
    color: #444;
    font-size: var(--font-size-addons-label); /* Usando la variable CSS */
}

.mpc-addons input[type="checkbox"],
.mpc-addons input[type="radio"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #007bff; /* Color de acento para los checkboxes/radios */
}

/* Área de resultados */
.mpc-result {
    width: 100%;
    padding: 25px;
    background-color: #e9f7ef;
    border: 1px solid #d4edda;
    border-radius: 10px;
    text-align: center;
    color: #155724;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilos para "El precio estimado de tu viaje es:" (párrafo dentro de .mpc-result) */
.mpc-result p:first-of-type {
    font-size: var(--font-size-price-label); /* Usando la variable CSS */
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

/* Estilos para el PRECIO (p.mpc-final-price) */
.mpc-final-price {
    font-size: var(--font-size-final-price); /* Usando la variable CSS */
    font-weight: 900;
    color: #28a745; /* Color verde vibrante */
    margin-top: 15px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Estilos para el texto de descargo de responsabilidad */
.mpc-disclaimer {
    font-size: var(--font-size-disclaimer); /* Usando la variable CSS */
    color: #5a6268;
    margin-top: 20px;
    font-style: italic;
    line-height: 1.5;
    max-width: 80%; /* Para que el texto no se extienda demasiado en líneas largas */
}

/* Estilos para el botón de acción (Contactar, Reservar, etc.) */
.mpc-action-button {
    display: inline-block; /* Se ajusta al contenido */
    margin-top: 25px; /* Espacio superior para separarlo del resultado */
    padding: 15px 30px;
    background-color: var(--button-bg-color); /* Usando variable CSS */
    color: var(--button-text-color); /* Usando variable CSS */
    text-decoration: none; /* Quitar subrayado del enlace */
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra sutil */
    text-align: center;
    max-width: 90%; /* Asegura que no sea demasiado ancho */
}

.mpc-action-button:hover {
    background-color: var(--button-hover-bg-color); /* Usando variable CSS */
    transform: translateY(-2px); /* Pequeño efecto de elevación al pasar el ratón */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* Sombra más pronunciada */
}

.mpc-action-button:active {
    transform: translateY(0); /* Vuelve a su posición original al hacer clic */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra más pequeña */
}


/* Media Query para móvil: apilar elementos en una sola columna */
@media (max-width: 768px) {
    .mpc-calculator-container {
        padding: 25px;
        margin: 20px auto;
        max-width: 550px;
    }
    .mpc-content-wrapper {
        flex-direction: column; /* Apilar columnas */
        gap: 0; /* Eliminar el espacio entre columnas */
    }
    .mpc-left-column,
    .mpc-right-column {
        width: 100%; /* Ocupar todo el ancho disponible */
        min-width: unset; /* Reiniciar el ancho mínimo */
        padding: 0;
    }
    /* Ajustes de tamaño de fuente específicos para móvil si es necesario, usando calc() para basarse en las variables */
    .mpc-calculator-container h2 {
        font-size: calc(var(--font-size-h2) * 0.9); /* Ligeramente más pequeño en móvil */
    }
    .mpc-addons h3 {
        font-size: calc(var(--font-size-h3) * 0.9);
        text-align: center; /* Centrar el título de complementos en móvil */
        border-bottom: none; /* Eliminar la línea inferior en móvil si no es necesario */
        padding-bottom: 0;
    }
    .mpc-result {
        margin-top: 30px; /* Más espacio entre el formulario y el resultado en móvil */
    }
    .mpc-final-price {
        font-size: calc(var(--font-size-final-price) * 0.8); /* Reducir el precio final en móvil */
    }
    .mpc-disclaimer {
        font-size: calc(var(--font-size-disclaimer) * 0.9);
    }
    .mpc-action-button {
        width: 100%; /* El botón ocupa todo el ancho en móviles */
        max-width: 300px; /* Pero con un máximo para que no sea excesivamente grande en tablets pequeñas */
        margin-left: auto; /* Para centrar el botón */
        margin-right: auto; /* Para centrar el botón */
        display: block; /* Para que margin: auto funcione */
        font-size: 1em; /* Ajustar tamaño de fuente en móvil */
    }
}