/**
 * Calculator Results Layout Fix
 * This file adjusts the alignment and positioning of result values and icons
 */

/* Base result block styling */
.result-block {
    position: relative;
    padding: 15px;
    margin-bottom: 5px;
    overflow: hidden;
}

/* Main result styling - highlighted items with beige background */
.main-result {
    background-color: #f9f5e9;
    border-left: 4px solid #d5b586;
    position: relative;
}

/* Fix value container positioning - ensure consistent right alignment */
.result-value-container {
    position: absolute;
    top: 50%;
    right: 20px; /* Consistent right margin for all values */
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

/* Position the icon next to the value, not above */
.calculator-icon {
    font-size: 1.2rem;
    position: absolute;
    right: -25px; /* Position icon to the right of the value */
    color: #d5b586;
}

/* Ensure the value is properly aligned */
.result-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111940;
    text-align: right;
}

/* Apply the same right position to values in non-highlighted rows */
.result-block:not(.main-result) .result-value {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* Keep the label on the left side */
.result-label {
    font-size: 1rem;
    color: #555;
    max-width: 60%;
    padding: 5px 0;
}

/* Styles for rows without highlighting */
.result-block:not(.main-result) {
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
}

/* Make sure the results container has proper padding */
.calculator-results-body {
    padding: 0;
}

/* Fix the results header */
.calculator-results-header {
    padding: 15px 20px;
}