.elementor-60816 .elementor-element.elementor-element-3fe8ca3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for container, class: .elementor-element-3fe8ca3 *//* ==========================================
   FIRE Calculator Premium UI
   Version: 4.0
   Clean Architecture
========================================== */


/* ==========================================
   DESIGN TOKENS
========================================== */

:root {

    --fire-primary:#10B981;

    --fire-primary-dark:#059669;

    --fire-dark:#0B1F3A;

    --fire-text:#334155;

    --fire-muted:#64748B;

    --fire-border:#E2E8F0;

    --fire-bg:#F8FAFC;

    --fire-white:#FFFFFF;

    --fire-radius:22px;

    --fire-shadow:
    0 12px 35px rgba(15,23,42,.06);

    --fire-shadow-hover:
    0 20px 45px rgba(15,23,42,.10);

}



/* ==========================================
   MAIN WRAPPER
========================================== */


.fire-calculator-wrapper.fire-version-1 {

    max-width:1200px;

    margin:40px auto;

    padding:45px;

    background:var(--fire-bg);

    border-radius:28px;

    font-family:
    "Manrope",
    "Inter",
    sans-serif;

    color:var(--fire-dark);

}





/* ==========================================
   HEADER
========================================== */


.fire-header {

    text-align:center;

    margin-bottom:35px;

}



.fire-header h2 {

    font-size:40px;

    font-weight:800;

    color:var(--fire-dark);

    margin-bottom:14px;

    letter-spacing:-.5px;

}



.fire-header p {

    max-width:750px;

    margin:auto;

    font-size:17px;

    line-height:1.7;

    color:var(--fire-muted);

}





/* ==========================================
   CARD SYSTEM
========================================== */


.fire-card {

    background:var(--fire-white);

    padding:30px;

    border-radius:var(--fire-radius);

    border:1px solid var(--fire-border);

    box-shadow:var(--fire-shadow);

    transition:.3s ease;

}



.fire-card:hover {

    transform:translateY(-3px);

    box-shadow:var(--fire-shadow-hover);

}



.fire-card h3 {

    font-size:21px;

    font-weight:750;

    color:var(--fire-dark);

    margin-bottom:22px;

}





/* ==========================================
   GRID SYSTEM
========================================== */


.fire-grid-layout {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:26px;

}



.premium-dashboard-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}



.fire-fire-types {

    margin-top:30px;

}





/* ==========================================
   INPUT SYSTEM
========================================== */


.fire-card label {

    display:block;

    margin-top:18px;

    margin-bottom:8px;

    font-size:14px;

    font-weight:650;

    color:var(--fire-text);

}



.fire-card input {


    width:100%;


    padding:14px 16px;


    border-radius:14px;


    border:1px solid #CBD5E1;


    background:#FFFFFF;


    color:var(--fire-dark);


    font-size:16px;


    box-sizing:border-box;


}



.fire-card input:focus {


    outline:none;


    border-color:var(--fire-primary);


    box-shadow:

    0 0 0 4px rgba(16,185,129,.15);


}





/* ==========================================
   SELECT SYSTEM
========================================== */


.fire-card select,
.fire-goal-card select,
#fire-goal,
#fire-currency {


    width:100%;


    height:52px;


    padding:0 16px;


    background:#FFFFFF !important;


    color:var(--fire-dark) !important;


    border:

    1px solid #CBD5E1 !important;


    border-radius:14px !important;


    font-size:15px;


    font-weight:600;


}



.fire-card select:focus {


    outline:none;


    border-color:var(--fire-primary) !important;


}





/* ==========================================
   HELPER TEXT
========================================== */


.fire-help-text {


    display:block;


    margin-top:8px;


    color:var(--fire-muted);


    font-size:13px;


    line-height:1.5;


}





/* ==========================================
   BUTTON
========================================== */


.fire-calculate-button {


    display:block;


    margin:38px auto;


    padding:17px 45px;


    border:none;


    border-radius:50px;


    background:


    linear-gradient(

        135deg,

        var(--fire-primary),

        var(--fire-primary-dark)

    );


    color:white;


    font-size:17px;


    font-weight:750;


    cursor:pointer;


    box-shadow:


    0 12px 30px rgba(16,185,129,.30);


}



.fire-calculate-button:hover {


    transform:translateY(-4px);


}

/* ==========================================
   RESULTS DASHBOARD
========================================== */


.fire-results {

    margin-top:50px;

}



.fire-results h3 {

    font-size:28px;

    font-weight:800;

    color:var(--fire-dark);

}




.fire-result-box {

    background:#FFFFFF;

    border-radius:24px;

    padding:30px;

    border:1px solid var(--fire-border);

}





.fire-result-grid {


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:18px;


}




.fire-result-card {


    background:#F8FAFC;


    border-radius:18px;


    padding:24px;


    text-align:center;


    color:#475569;


    border:1px solid var(--fire-border);


}





.fire-result-card strong {


    display:block;


    margin-top:15px;


    font-size:28px;


    font-weight:800;


    color:var(--fire-dark);


}




.fire-result-card:first-child strong {


    color:var(--fire-primary);


}




.premium-highlight {


    background:#ECFDF5;


    border-color:var(--fire-primary);


}





/* ==========================================
   FIRE TYPES / TARGET CARDS
========================================== */


.fire-fire-types {

    margin-top:30px;

}



.fire-fire-types .fire-card {

    background:#FFFFFF;

}



.fire-fire-types h4 {

    font-size:22px;

    color:var(--fire-dark);

    margin-bottom:15px;

}



.fire-fire-types p {

    color:var(--fire-muted);

    line-height:1.6;

}





/* ==========================================
   PREMIUM GROWTH CHART v4.0
========================================== */


.fire-premium-growth-chart {


    width:100%;


    height:330px;


    background:


    linear-gradient(

        to top,

        rgba(16,185,129,.05),

        transparent

    );


    border-radius:24px;


    padding:55px 30px 25px;


    border:1px solid var(--fire-border);


    display:flex;


    align-items:flex-end;


    justify-content:space-between;


    gap:25px;


    position:relative;


    overflow:visible;


}





/* chart grid */

.fire-premium-growth-chart:before {


    content:"";


    position:absolute;


    inset:45px 25px 55px;



    background:


    repeating-linear-gradient(

        to top,

        rgba(148,163,184,.15),

        rgba(148,163,184,.15) 1px,

        transparent 1px,

        transparent 55px

    );


}





.fire-growth-item {


    flex:1;


    height:100%;


    display:flex;


    flex-direction:column;


    justify-content:flex-end;


    align-items:center;


    position:relative;


    z-index:2;


}





.fire-growth-bar-wrapper {


    height:82%;


    width:100%;


    display:flex;


    align-items:flex-end;


    justify-content:center;


}





.fire-growth-bar {


    width:52px;


    max-width:70%;


    min-height:10px;



    background:


    linear-gradient(

        180deg,

        #34D399,

        #059669

    );



    border-radius:

    14px 14px 6px 6px;



    box-shadow:


    0 8px 20px rgba(16,185,129,.18);



    animation:


    fireBarGrow .9s ease forwards;



    transform-origin:bottom;


    transition:.3s ease;


}




.fire-growth-bar:hover {


    transform:


    translateY(-10px)

    scale(1.05);



    box-shadow:


    0 20px 35px rgba(16,185,129,.35);


}





@keyframes fireBarGrow {


    from {


        transform:scaleY(0);


        opacity:0;


    }


    to {


        transform:scaleY(1);


        opacity:1;


    }


}





.fire-growth-age {


    margin-top:14px;


    font-size:14px;


    font-weight:750;


    color:#475569;


}





/* chart tooltip */


.fire-growth-tooltip {


    position:absolute;


    bottom:115px;


    left:50%;


    transform:


    translateX(-50%);



    background:


    linear-gradient(

        135deg,

        #0B1F3A,

        #1E293B

    );



    color:#FFFFFF;


    padding:12px 16px;


    border-radius:14px;


    min-width:120px;


    text-align:center;


    font-size:12px;


    line-height:1.5;


    white-space:nowrap;


    opacity:1;


    visibility:visible;


    box-shadow:


    0 18px 35px rgba(15,23,42,.25);


    z-index:20;


}





.fire-growth-tooltip strong {


    display:block;


    color:#34D399;


    font-size:16px;


}





.fire-growth-tooltip:after {


    content:"";


    position:absolute;


    bottom:-7px;


    left:50%;


    transform:translateX(-50%);



    border-width:7px 7px 0;


    border-style:solid;


    border-color:#0B1F3A transparent transparent;


}





/* ==========================================
   PREMIUM TIMELINE
========================================== */


.fire-premium-timeline {


    position:relative;


    padding-left:35px;


}





.fire-premium-timeline:before {


    content:"";


    position:absolute;


    left:10px;


    top:0;


    bottom:0;


    width:3px;


    background:var(--fire-primary);


}





.fire-timeline-card {


    position:relative;


    background:#FFFFFF;


    border:1px solid var(--fire-border);


    border-radius:18px;


    padding:20px;


    margin-bottom:22px;


    box-shadow:


    0 8px 20px rgba(15,23,42,.05);


}





.fire-timeline-dot {


    position:absolute;


    left:-34px;


    top:25px;


    width:16px;


    height:16px;


    border-radius:50%;


    background:var(--fire-primary);


    border:4px solid #FFFFFF;


}





.fire-timeline-age {


    font-size:14px;


    color:var(--fire-muted);


}





.fire-timeline-info h4 {


    margin:6px 0;


    font-size:18px;


    font-weight:750;


    color:var(--fire-dark);


}





.fire-timeline-money {


    font-size:28px;


    font-weight:800;


    color:var(--fire-dark);


}





.fire-achieved {


    background:


    linear-gradient(

        135deg,

        #ECFDF5,

        #FFFFFF

    );


    border:


    2px solid var(--fire-primary);


    box-shadow:


    0 15px 35px rgba(16,185,129,.18);


}





.fire-achieved .fire-timeline-dot {


    background:#059669;


    animation:


    firePulse 2s infinite;


}





@keyframes firePulse {


    0% {


        box-shadow:0 0 0 0 rgba(16,185,129,.5);

    }


    70% {


        box-shadow:0 0 0 12px rgba(16,185,129,0);

    }


    100% {


        box-shadow:0 0 0 0 rgba(16,185,129,0);

    }


}

/* ==========================================
   COUNTRY PLANNING
========================================== */


.fire-country-profile h4 {

    font-size:22px;

    color:var(--fire-dark);

    margin-bottom:15px;

}



.fire-country-section {


    margin-top:20px;


    padding:18px;


    background:#F8FAFC;


    border-radius:16px;


    border:1px solid var(--fire-border);


}



.fire-country-section strong {


    display:block;


    color:var(--fire-dark);


    margin-bottom:10px;


}



.fire-country-section ul {


    margin:10px 0 0 20px;


    color:#475569;


}



.fire-country-section p {


    color:var(--fire-muted);


    line-height:1.6;


}






/* ==========================================
   GENERAL PREMIUM SECTIONS
========================================== */


.fire-analysis-card {


    background:#FFFFFF;


    border-radius:22px;


    padding:28px;


    border:1px solid var(--fire-border);


    box-shadow:var(--fire-shadow);


}



.fire-analysis-card h3 {


    color:var(--fire-dark);


    font-size:22px;


}



.fire-analysis-card p {


    color:var(--fire-muted);


    line-height:1.7;


}





/* ==========================================
   TABLET RESPONSIVE
========================================== */


@media(max-width:900px){



.fire-grid-layout {


    grid-template-columns:1fr;


}



.fire-result-grid {


    grid-template-columns:repeat(2,1fr);


}



.premium-dashboard-grid {


    grid-template-columns:repeat(2,1fr);


}



.fire-calculator-wrapper.fire-version-1 {


    padding:30px;


}



}





/* ==========================================
   MOBILE RESPONSIVE
========================================== */


@media(max-width:600px){



.fire-calculator-wrapper.fire-version-1 {


    margin:20px auto;


    padding:20px;


    border-radius:20px;


}




.fire-header h2 {


    font-size:30px;


}



.fire-header p {


    font-size:15px;


}




.fire-card {


    padding:22px;


}



.fire-card h3 {


    font-size:19px;


}




.fire-result-grid {


    grid-template-columns:1fr;


}



.premium-dashboard-grid {


    grid-template-columns:1fr;


}





/* Growth chart mobile */


.fire-premium-growth-chart {


    height:250px;


    padding:


    55px 8px 25px;


    gap:8px;


    overflow:hidden;


}





.fire-growth-bar {


    width:24px;


}





.fire-growth-age {


    font-size:11px;


}



.fire-growth-tooltip {


    min-width:70px;


    width:70px;


    white-space:normal;


    font-size:10px;


    padding:8px;


}





.fire-growth-tooltip strong {


    font-size:12px;


}





/* Timeline mobile */


.fire-premium-timeline {


    padding-left:28px;


}



.fire-timeline-card {


    padding:18px;


}



.fire-timeline-money {


    font-size:22px;


}



.fire-timeline-info h4 {


    font-size:16px;


}





}





/* ==========================================
   EXTRA SMALL DEVICES
========================================== */


@media(max-width:380px){



.fire-premium-growth-chart {


    padding-left:4px;


    padding-right:4px;


}




.fire-growth-bar {


    width:18px;


}



.fire-growth-age {


    font-size:10px;


}



.fire-growth-tooltip {


    width:55px;


    min-width:55px;


    font-size:9px;


}



}

/* ==========================================
   TIMELINE TITLE SPACING FIX
========================================== */

.fire-premium-growth-chart + h3 {

    margin-top:35px;

}/* End custom CSS */