/* =============================================
FILE: /assets/03-tools-page/css/01-utils/08-calc/03-calc-percentage.css
LINK: <link rel="stylesheet" href="/assets/03-tools-page/css/01-utils/08-calc/03-calc-percentage.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 {
        --jux-tool-accent: var(--jzn-hover, #00ff88);
    }

    .jux-percent-central-stack {
        max-width: 380px; /* Slightly wider for the math sentences */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        position: relative;
    }

    /* ===========================================
    SECTION: UI COMPONENT OVERRIDES
    =========================================== */

    /* Centered Screen */
    #jux-percent-screen {
        width: 100%;
        text-align: center;
        border: 1.5px solid var(--jux-tool-accent);
        background: rgba(0, 0, 0, 0.4);
        padding: 20px;
        border-radius: 12px;
        box-sizing: border-box;
    }

    /* 3-Column Mode Switcher */
    .jux-percent-mode-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        padding: 5px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .jux-mode-btn {
        background: transparent;
        border: 1px solid transparent;
        color: rgba(255, 255, 255, 0.5);
        padding: 12px 5px;
        font-size: 0.65rem;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.3s ease;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
        font-family: var(--jzn-active-font);
    }

    .jux-mode-btn.active {
        background: color-mix(in srgb, var(--jux-tool-accent), transparent 85%);
        color: var(--jux-tool-accent);
        border: 1px solid var(--jux-tool-accent);
    }

    /* Math Sentence Alignment */
    .jux-math-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        margin: 10px 0 20px 0;
        font-family: var(--jzn-active-font);
        color: #fff;
        text-align: center;
    }

    .jux-math-row span {
        font-size: 0.9rem;
        text-transform: uppercase;
        opacity: 0.8;
    }

    /* Specialized Input Sizing */
    .jux-input-math {
        width: 110px !important;
        text-align: center;
        border: 1.5px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        padding: 10px;
        border-radius: 8px;
        pointer-events: auto !important;
    }

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

    /* --- HOLY GRAIL BUTTONS --- */
    .btn-jux-percent-calc {
        width: 100%;
        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;
    }

    .btn-jux-percent-calc:hover {
        background: var(--jux-tool-accent) !important;
        border: 2px solid #ffffff !important;
        color: #000 !important;
        transform: translateY(-1px);
    }

    .btn-jux-percent-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);
        font-size: 0.7rem;
    }

    /* Transition Animation */
    .jux-mode-zone {
        display: none;
        width: 100%;
        animation: juxFadeUp 0.3s ease;
    }
    .jux-mode-zone.active { display: block; }

    @keyframes juxFadeUp {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 600px) {
        .jux-math-row { flex-direction: column; gap: 8px; }
        .jux-input-math { width: 100% !important; }
    }