/* Google Fonts - Inter is a good, modern sans-serif font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Overall Container for Factoring Calculator - Mimics .calculadora-prestamos-wrapper */
.factoring-calculator-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Adopted font family */
    max-width: 800px; /* Adjusted to a reasonable max-width for content, original snippet had 1800px which is too wide for common single column */
    width: 90%; /* Use 90% width to ensure some margin from screen edges */
    margin: 2em auto; /* Adopted margin from snippet */
    padding: 25px; /* Adopted padding from snippet */
    border: 1px solid #e0e0e0; /* Adopted border from snippet */
    border-radius: 12px; /* Adopted border-radius from snippet */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Adopted box-shadow from snippet */
    background-color: #ffffff; /* Adopted background-color from snippet */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center content horizontally */
}

/* Main Title for the Calculator - Mimics h3 inside .calculadora-prestamos-wrapper */
.factoring-calculator-container > h2 {
    font-size: 24px; /* Adopted font-size from snippet */
    color: #1a202c; /* Adopted color from snippet */
    text-align: center; /* Adopted text-align from snippet */
    margin-top: 0;
    margin-bottom: 25px; /* Adopted margin-bottom from snippet */
    width: 100%;
}

/* Input Section - Blends into main container, no specific background or shadow */
.fcp-input-section {
    width: 100%;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Input Section Heading - Mimics h3 inside .calculadora-prestamos-wrapper */
.fcp-input-section h3 {
    font-size: 24px; /* Adopted font-size from snippet */
    color: #1a202c; /* Adopted color from snippet */
    text-align: center; /* Centered as per new H3 style */
    margin-top: 0;
    margin-bottom: 25px;
    width: 100%;
}

/* Input Groups (Monto de la Factura, Plazo en Días) - Mimics .campo */
.fcp-input-group {
    width: 100%;
    margin-bottom: 25px; /* Adopted margin-bottom from snippet */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Labels - Mimics label inside .calculadora-prestamos-wrapper */
.fcp-input-group label {
    display: block; /* Adopted from snippet */
    font-weight: 600; /* Adopted from snippet */
    color: #4a5568; /* Adopted color from snippet */
    margin-bottom: 8px; /* Adopted margin-bottom from snippet */
    font-size: 14px; /* Adopted font-size from snippet */
    width: 100%;
}

/* Input with Currency Symbol Wrapper (for Monto de la Factura) and Slider Display Wrapper (for Plazo en Días) - Mimics .display-box */
.fcp-input-with-currency,
.fcp-input-display-wrapper {
    width: 100%; /* Adopted from snippet */
    padding: 5px; /* Adopted padding from snippet */
    border: 1px solid #cbd5e0; /* Adopted border from snippet */
    border-radius: 8px; /* Adopted border-radius from snippet */
    background-color: #f7fafc; /* Adopted background-color from snippet */
    text-align: center; /* Adopted text-align from snippet */
    font-size: 15px; /* Adopted font-size from snippet */
    font-weight: 600; /* Adopted font-weight from snippet */
    color: #2d3748; /* Adopted color from snippet */
    box-sizing: border-box; /* Adopted from snippet */
    display: flex; /* Kept for flex layout of content inside */
    justify-content: center; /* Center content */
    align-items: center; /* Align items vertically */
}

.fcp-input-with-currency input[type="number"] {
    flex: 1;
    padding: 0;
    border: none;
    background-color: transparent; /* Ensure input background is transparent */
    outline: none;
    font-size: 15px; /* Match display box font size */
    font-weight: 600; /* Match display box font weight */
    color: #2d3748; /* Match display box color */
    text-align: center; /* Match display box text alignment */
}

.fcp-input-with-currency input[type="number"]:focus {
    box-shadow: none;
}

.fcp-currency-symbol {
    margin-left: 0; /* Remove margin as symbol is now at start of text in JS */
    margin-right: 5px; /* Add margin for spacing after symbol */
    font-size: 15px; /* Match display box font size */
    font-weight: 600; /* Match display box font weight */
    color: #2d3748; /* Match display box color */
}

.fcp-input-display-wrapper span {
    font-weight: 600; /* Ensure number itself matches overall text */
    color: #2d3748; /* Ensure text color is standard */
    font-size: 15px; /* Match display box font size */
}

/* Slider Styling - Adopted from snippet */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #e2e8f0; /* Adopted background from snippet */
    border-radius: 5px; /* Adopted border-radius from snippet */
    outline: none;
    margin-top: 15px; /* Adopted margin-top from snippet */
    opacity: 1; /* Make sure it's fully visible */
    -webkit-transition: none; /* Remove transition */
    transition: none; /* Remove transition */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #2f855a; /* Adopted background from snippet */
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff; /* Adopted border from snippet */
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Adopted box-shadow from snippet */
    transition: none; /* Remove transition */
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #2f855a;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: none; /* Remove transition */
}

input[type="range"]::-webkit-slider-thumb:active,
input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
    background-color: #218838; /* Slightly darker green when active */
    box-shadow: 0 0 0 5px rgba(40, 167, 69, 0.3);
}

/* Calculate Button (Still hidden) */
#fcp_calculate_btn {
    display: none;
}

/* Result Section - Mimics .resultado-final from snippet and image_3abbfe.png */
.fcp-result-section {
    background-color: #14397A; /* Specific background-color from image_3abbfe.png */
    color: white; /* General text color for results section */
    padding: 20px; /* Padding adopted from snippet */
    border-radius: 8px; /* Border-radius adopted from snippet */
    text-align: left; /* Default text-align for section (overridden by children) */
    width: 100%;
    margin-top: 25px;
    box-shadow: none; /* No extra shadow */
    display: flex;
    flex-direction: column;
    /* align-items: center; */ /* Removed this to allow individual items to justify */
}

/* Result Section Heading (e.g., "Resultados del Cálculo") - As per image_3abbfe.png */
.fcp-result-section h3 {
    font-size: 24px; /* Matches main heading size, looks like in image */
    font-weight: 700; /* Bold as in image */
    color: white; /* White as in image */
    text-align: center; /* Centered as in image */
    margin: 0 0 20px 0; /* Space below heading */
    width: 100%;
}

/* Result Groups (e.g., "Total de Comisión") - As per image_3abbfe.png */
.fcp-result-group, .fcp-info-group {
    width: 100%;
    margin-bottom: 10px; /* Space between lines */
    display: flex; /* Use flex to align label and value on same line */
    justify-content: space-between; /* Push label left, value right */
    align-items: baseline; /* Align text baselines */
    padding-bottom: 10px; /* Space below content before border */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Subtle white separator as in image */
}

/* Remove border for the very last item in result section */
.fcp-result-section .fcp-result-group:last-of-type,
.fcp-result-section .fcp-info-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* Labels within results (e.g., "Total de Comisión") - As per image_3abbfe.png */
.fcp-result-group span:first-child,
.fcp-info-group span:first-child {
    font-weight: 500; /* Lighter weight for labels */
    color: rgba(255, 255, 255, 0.9); /* White color for labels */
    font-size: 16px; /* Size similar to image */
    line-height: 1.4;
    text-align: left; /* Aligned left */
    flex-grow: 1; /* Allow label to grow */
}

/* Value Display for Results (e.g., "B/. 10.00") - As per image_3abbfe.png */
.fcp-result-group .fcp-value {
    font-weight: 700; /* Bolder for values */
    color: #ffffff; /* White color for values */
    font-size: 18px; /* Slightly larger size for values */
    text-align: right; /* Aligned right */
    white-space: nowrap;
    min-width: 80px; /* Ensure values have minimum space */
}

/* Info Group (Plazo en días/meses) Values - As per image_3abbfe.png (looks similar to labels) */
.fcp-info-group span:last-child {
    font-weight: 700; /* Bolder for info values */
    color: #ffffff; /* White for info values */
    font-size: 18px; /* Size similar to values */
    text-align: right; /* Aligned right */
}


/* Responsive adjustments */
@media (max-width: 550px) {
    .factoring-calculator-container {
        padding: 20px;
        width: 95%;
    }

    .factoring-calculator-container > h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .fcp-input-group {
        margin-bottom: 20px;
    }

    .fcp-input-with-currency,
    .fcp-input-display-wrapper {
        padding: 10px 12px;
        font-size: 14px;
    }

    .fcp-input-with-currency input[type="number"] {
        font-size: 14px;
    }

    .fcp-currency-symbol {
        font-size: 14px;
    }

    .fcp-result-section {
        padding: 20px;
        margin-top: 20px;
    }

    .fcp-result-section h3 {
        font-size: 20px; /* Adjust size for mobile */
        margin-bottom: 15px;
    }

    /* Adjust result groups for mobile */
    .fcp-result-group, .fcp-info-group {
        margin-bottom: 8px; /* Slightly tighter spacing on mobile */
        padding-bottom: 8px;
    }
    .fcp-result-group span:first-child,
    .fcp-info-group span:first-child {
        font-size: 15px;
    }
    .fcp-result-group .fcp-value,
    .fcp-info-group span:last-child {
        font-size: 17px; /* Adjust value size for mobile */
    }
}