/* =============================================================================
 * Apex Calculators Public Styles - UPDATED
 * ============================================================================= */

:root {
    --apex-primary-color: #005A9C; 
    --apex-secondary-color: #00A3E0; 
    --apex-accent-color: #FDB813;
    --apex-text-color: #333333; 
    --apex-light-gray: #f4f4f4; 
    --apex-border-color: #dddddd;
    --apex-success-color: #28a745; 
    --apex-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.apex-calculator-container { 
    font-family: var(--apex-font-family); 
    color: var(--apex-text-color); 
    background-color: #fff; 
    border: 1px solid var(--apex-border-color); 
    border-radius: 12px; 
    padding: 30px 40px; 
    margin: 40px auto; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
    max-width: 900px;
}

.apex-calculator-header { 
    text-align: center; 
    margin-bottom: 25px; 
    border-bottom: 1px solid var(--apex-border-color); 
    padding-bottom: 15px; 
}

.apex-calculator-header h1 { 
    font-size: 28px; 
    color: var(--apex-primary-color); 
    margin: 0 0 5px 0; 
}

.apex-calculator-header p { 
    font-size: 16px; 
    color: #666; 
    margin: 0; 
    max-width: 600px; 
    margin-left: auto; 
    margin-right: auto; 
}

.apex-calculator-body { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 30px; 
}

@media (min-width: 768px) { 
    .apex-calculator-body { 
        grid-template-columns: 320px 1fr; 
    } 
}

.apex-input-panel, .apex-results-panel { 
    padding: 25px; 
    background-color: var(--apex-light-gray); 
    border-radius: 8px; 
}

.apex-input-group { 
    margin-bottom: 18px; 
}

.apex-input-group label { 
    display: block; 
    font-weight: 600; 
    margin-bottom: 8px; 
    font-size: 14px; 
}

.apex-input-group input, .apex-input-group select, .apex-input-group textarea { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid var(--apex-border-color); 
    border-radius: 5px; 
    font-size: 16px; 
    box-sizing: border-box; 
}

.apex-input-group input:focus { 
    outline: none; 
    border-color: var(--apex-primary-color); 
    box-shadow: 0 0 0 2px rgba(0, 90, 156, 0.2); 
}

.apex-results-panel h2 { 
    font-size: 22px; 
    color: var(--apex-primary-color); 
    margin-top: 0; 
    text-align: center; 
}

.apex-primary-result { 
    text-align: center; 
    margin: 20px 0; 
    padding: 20px; 
    background-color: #fff; 
    border-radius: 8px; 
    border: 2px solid var(--apex-secondary-color); 
}

.apex-primary-result .label { 
    font-size: 16px; 
    color: #666; 
    margin-bottom: 5px; 
}

.apex-primary-result .value { 
    font-size: 42px; 
    font-weight: 700; 
    color: var(--apex-primary-color); 
}

.apex-secondary-results { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    text-align: center; 
}

.apex-secondary-result-item .label { 
    font-size: 14px; 
    color: #666; 
}

.apex-secondary-result-item .value { 
    font-size: 20px; 
    font-weight: 600; 
    color: var(--apex-text-color); 
}

.apex-chart-container { 
    margin-top: 25px; 
    background: #fff; 
    padding: 15px; 
    border-radius: 8px; 
}

.apex-share-section { 
    text-align: center; 
    margin-top: 20px; 
}

.apex-share-button { 
    background-color: var(--apex-success-color); 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 5px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.2s; 
}

.apex-share-button:hover { 
    background-color: #218838; 
}

.apex-share-link { 
    margin-top: 10px; 
}

.apex-share-link input { 
    width: 100%; 
    padding: 8px; 
    border: 1px solid var(--apex-border-color); 
    border-radius: 5px; 
    text-align: center; 
    background-color: #e9ecef; 
}

/* =============================================================================
 * Related Calculators Grid - UPDATED
 * ============================================================================= */
.apex-related-calculators {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

.apex-related-calculators h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    color: #333;
}

.apex-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

@media (min-width: 1200px) {
    .apex-related-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.apex-related-item {
    display: block;
    background-color: #ffffff;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.apex-related-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.apex-related-item-image {
    width: 100%;
    padding-top: 60%; /* Aspect Ratio 5:3 */
    position: relative;
    background-color: #f7fafc;
}

.apex-related-item-image img,
.apex-related-item-image .apex-placeholder-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apex-placeholder-image svg {
    width: 100%;
    height: 100%;
}

.apex-related-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
    padding: 15px 20px;
    line-height: 1.4;
}

/* =============================================================================
 * Homepage Top Calculators
 * ============================================================================= */
.apex-top-calculators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}
.apex-pagination {
    text-align: center;
    margin-top: 40px;
}
.apex-pagination a, .apex-pagination span {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    border: 1px solid var(--apex-border-color);
    border-radius: 5px;
    text-decoration: none;
    color: var(--apex-primary-color);
    transition: all 0.2s;
}
.apex-pagination a:hover {
    background-color: var(--apex-primary-color);
    color: #fff;
}
.apex-pagination .current {
    background-color: var(--apex-primary-color);
    color: #fff;
    border-color: var(--apex-primary-color);
}