/* =============================================
FILE: /assets/03-tools-page/css/01-utils/08-calc/01-calc-age.css
LINK: <link rel="stylesheet" href="/assets/03-tools-page/css/01-utils/08-calc/01-calc-age.css">
PURPOSE: UI for Calculator Suite (v6.0 Logic-UI) - Age Calculator
VERSION: v1.0  DATE CREATED: 2026-04-25 - Age Calculator
============================================== */


    /* ===========================================
    SECTION: LOCALIZED THEME ENGINE (DNA)
    =========================================== */
    :root {
        /* Defaulting to System Hover Color instead of hard-coded green */
        --jux-tool-accent: var(--jzn-hover, #00ff88);
    }

    .jux-age-central-stack {
        max-width: 350px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        position: relative;
        z-index: 5;
    }

    /* Centered Age Screen */
    #jux-age-screen {
        width: 100%;
        max-width: 350px;
        text-align: center;
        /* Border follows the DNA variable */
        border: 1.5px solid var(--jux-tool-accent);
        background: rgba(0, 0, 0, 0.4);
        padding: 20px;
        border-radius: 12px;
        box-sizing: border-box;
    }

    .jux-calc-result-main {
        color: var(--jux-tool-accent) !important;
        font-size: var(--jzn-size-h2);
        font-weight: 700;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    /* Unlocked Centered Input Field */
    .jux-age-input-centered {
        width: 100% !important;
        text-align: center;
        border: 1.5px solid rgba(255,255,255,0.1);
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        padding: 12px;
        border-radius: 8px;
        font-family: var(--jzn-active-font);
        cursor: pointer !important;
        pointer-events: auto !important;
        display: block;
        margin: 0 auto;
    }

    .jux-age-input-centered:focus {
        border-color: var(--jux-tool-accent);
        outline: none;
    }

/* ===========================================
   SECTION: THE HOLY GRAIL CALCULATE BUTTON
   =========================================== */

.btn-jux-age-calc {
    width: 100%;
    /* Static State: 20% intensity of the DNA color, 80% transparent */
    background: color-mix(in srgb, var(--jux-tool-accent), transparent 80%) !important;
    border: 1.5px solid var(--jux-tool-accent);
    color: #fff !important;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    font-family: var(--jzn-active-font);
    transition: all 0.2s ease-in-out;
    box-shadow: none !important;
}

.btn-jux-age-calc:hover {
    /* Hover State: Solid DNA color with 2px White Border */
    background: var(--jux-tool-accent) !important;
    border: 2px solid #ffffff !important;
    color: #000 !important; /* Contrast flip for legibility */
    box-shadow: none !important; /* Ensuring no glow leaks through */
    transform: translateY(-1px); /* Minor lift for tactile feel */
}

    /* Reset Button */
    .btn-jux-age-reset {
        width: 100%;
        background: transparent;
        border: 1.5px solid var(--jux-tool-accent);
        color: var(--jux-tool-accent);
        border-radius: 8px;
        padding: 10px;
        cursor: pointer;
        text-transform: uppercase;
        font-family: var(--jzn-active-font);
    }

    /* Legacy 3x3 Stats Grid */
    .jux-age-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 25px;
        width: 100%;
    }

    .jux-age-stat-card {
        background: rgba(255, 255, 255, 0.02);
        padding: 12px 5px;
        border: 1.5px solid var(--jux-tool-accent);
        border-radius: 8px;
        text-align: center;
        transition: transform 0.2s;
    }

    .jux-stat-val {
        color: var(--jux-tool-accent) !important;
        font-weight: 700;
        display: block;
        font-family: var(--jzn-active-font);
    }

    .jux-stat-label {
        font-size: 0.65rem;
        opacity: 0.7;
        text-transform: uppercase;
        color: var(--jzn-text);
    }

    .jux-age-countdown-pill {
        color: var(--jux-tool-accent);
        font-size: 0.75rem;
        text-transform: uppercase;
        margin-top: 10px;
        display: block;
        font-weight: 600;
    }

    /* ===========================================
   SECTION: DATE INPUT CAPS FIX
   =========================================== */

/* Target the actual input text and the placeholder segments */
#jux-age-input-dob {
    text-transform: uppercase; /* Forces general text to caps */
}

/* Chrome, Edge, and Safari specific: Targets the date segments (dd, mm, yyyy) */
#jux-age-input-dob::-webkit-datetime-edit {
    text-transform: uppercase;
}

#jux-age-input-dob::-webkit-datetime-edit-fields-wrapper {
    text-transform: uppercase;
}

#jux-age-input-dob::-webkit-datetime-edit-text {
    text-transform: uppercase;
}

/* Ensures the specific day/month/year labels inside are capped */
#jux-age-input-dob::-webkit-datetime-edit-month-field,
#jux-age-input-dob::-webkit-datetime-edit-day-field,
#jux-age-input-dob::-webkit-datetime-edit-year-field {
    text-transform: uppercase;
}