/**
 * Tool-Specific Stylesheet for Life Path Evaluator.
 */

/* ===================================================================
 * 1. UNIQUE COLOR PALETTE
 * A palette inspired by spirituality and insight.
 * ===================================================================
*/
[data-tool-id="4023"] .auras-tool-notice {
    background-color: #f3eefc; /* Light Lavender */
    border-left-color: #8a63d2; /* Wisdom Amethyst */
    color: #5d468c;
}
[data-tool-id="4023"] .auras-tool-button-calculate {
    background-color: #7952b3; /* Deep Amethyst */
    color: #ffffff;
}
[data-tool-id="4023"] .auras-tool-button-calculate:hover {
    background-color: #61428f;
}
[data-tool-id="4023"] .auras-ai-button {
    background-color: #4a548c; /* Mystic Indigo */
    color: #ffffff;
}
[data-tool-id="4023"] .auras-ai-button:hover {
    background-color: #3b4370;
}

/* ===================================================================
 * 2. CUSTOM RESULT LAYOUT
 * Styles for the result display area.
 * ===================================================================
*/
[data-tool-id="4023"] .life-path-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}
[data-tool-id="4023"] .life-path-visual .auras-tool-result-image {
    max-width: 120px;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(121, 82, 179, 0.2);
}
[data-tool-id="4023"] .life-path-details h4 {
    font-size: 1.5rem;
    color: #3d4a59;
    margin-bottom: 1rem;
}
[data-tool-id="4023"] .life-path-number-label {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}
[data-tool-id="4023"] .life-path-number-value {
    font-size: 3.5rem;
    font-weight: 700;
    color: #7952b3; /* Deep Amethyst */
    margin: 0 0 1rem 0;
    line-height: 1;
}
[data-tool-id="4023"] .life-path-interpretation {
    font-size: 1.1rem;
    color: #5a6e82;
    line-height: 1.7;
}

/* Responsive adjustments for the result layout */
@media (min-width: 600px) {
    [data-tool-id="4023"] .life-path-result {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }
    [data-tool-id="4023"] .life-path-visual {
        flex-shrink: 0;
    }
}