.dagac-app{
    --primary:#f97316;
    --primary-dark:#ea580c;
    --primary-soft:#fff7ed;

    --navy:#101828;
    --text:#344054;
    --muted:#667085;

    --border:#e4e7ec;
    --soft:#f8fafc;

    --green:#067647;
    --green-soft:#ecfdf3;
    --green-border:#abefc6;

    --red:#b42318;
    --red-soft:#fef3f2;
    --red-border:#fecdca;

    --yellow:#b54708;
    --yellow-soft:#fffaeb;
    --yellow-border:#fedf89;

    width:100%;
    max-width:780px;
    margin:28px auto;
    color:var(--navy);
    font-family:inherit;
}

.dagac-app *,
.dagac-app *::before,
.dagac-app *::after{
    box-sizing:border-box;
}

.dagac-card{
    padding:36px;
    border:1px solid #eaecf0;
    border-radius:20px;
    background:#fff;
    box-shadow:0 20px 45px rgba(16,24,40,.07);
}


/* HEADER */

.dagac-header{
    text-align:center;
    margin-bottom:22px;
}

.dagac-main-icon{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 11px;
    border-radius:17px;
    background:var(--primary-soft);
    color:var(--primary);
}

.dagac-main-icon svg{
    width:29px;
    height:29px;
}

.dagac-badge{
    display:inline-block;
    padding:5px 11px;
    margin-bottom:8px;
    border-radius:999px;
    background:var(--primary-soft);
    color:#c2410c;
    font-size:11px;
    font-weight:700;
}

.dagac-header h2{
    margin:0;
    color:var(--navy);
    font-size:30px;
    line-height:1.25;
}

.dagac-header p{
    max-width:620px;
    margin:9px auto 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
}


/* PRIVACY */

.dagac-privacy{
    display:flex;
    gap:10px;
    padding:13px 15px;
    margin-bottom:25px;
    border:1px solid var(--green-border);
    border-radius:11px;
    background:var(--green-soft);
}

.dagac-privacy-icon{
    flex:0 0 30px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#dcfae6;
    color:var(--green);
}

.dagac-privacy-icon svg{
    width:17px;
    height:17px;
}

.dagac-privacy strong{
    display:block;
    color:var(--green);
    font-size:11px;
}

.dagac-privacy p{
    margin:2px 0 0;
    color:#475467;
    font-size:10px;
    line-height:1.55;
}


/* SECTIONS */

.dagac-section{
    padding:23px 0;
    border-top:1px solid #f2f4f7;
}

.dagac-step{
    display:flex;
    gap:11px;
    align-items:flex-start;
    margin-bottom:17px;
}

.dagac-step > span{
    flex:0 0 32px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--primary-soft);
    color:var(--primary-dark);
    font-size:12px;
    font-weight:800;
}

.dagac-step h3{
    margin:0 0 3px;
    color:var(--navy);
    font-size:17px;
}

.dagac-step h3 em{
    display:inline-block;
    margin-left:5px;
    padding:3px 7px;
    border-radius:999px;
    background:#f2f4f7;
    color:#667085;
    font-size:8px;
    font-style:normal;
    font-weight:700;
    vertical-align:middle;
}

.dagac-step p{
    margin:0;
    color:var(--muted);
    font-size:11px;
    line-height:1.5;
}


/* LABEL */

.dagac-label{
    display:block;
    margin-bottom:7px;
    color:var(--text);
    font-size:10px;
    font-weight:700;
}


/* DATE FIELD */

.dagac-date-field{
    position:relative;
    display:flex;
    align-items:center;
    border:1px solid #d0d5dd;
    border-radius:10px;
    background:#fff;
    transition:.2s ease;
}

.dagac-date-field:focus-within{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(249,115,22,.08);
}

.dagac-date-field svg{
    position:absolute;
    left:13px;
    width:18px;
    height:18px;
    color:#98a2b3;
    pointer-events:none;
}

.dagac-date-field input{
    width:100%;
    min-height:50px;
    padding:0 13px 0 43px !important;
    margin:0 !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    color:var(--navy);
    font-family:inherit;
    font-size:13px;
    cursor:pointer;
}

.dagac-field-help,
.dagac-optional-help{
    margin:7px 0 0;
    color:#98a2b3;
    font-size:9px;
    line-height:1.5;
}


/* CUTOFF */

.dagac-cutoff-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.dagac-today{
    margin-bottom:7px;
    padding:5px 9px;
    border:1px solid #fed7aa;
    border-radius:7px;
    background:var(--primary-soft);
    color:var(--primary-dark);
    font-family:inherit;
    font-size:9px;
    font-weight:700;
    cursor:pointer;
}

.dagac-today:hover{
    border-color:var(--primary);
}


/* INFO */

.dagac-info-box{
    display:flex;
    gap:8px;
    padding:10px 12px;
    margin-top:10px;
    border-radius:8px;
    background:#f8fafc;
}

.dagac-info-box svg{
    flex:0 0 16px;
    width:16px;
    height:16px;
    margin-top:1px;
    color:#667085;
}

.dagac-info-box p{
    margin:0;
    color:#667085;
    font-size:9px;
    line-height:1.6;
}

.dagac-info-box strong{
    color:#344054;
}


/* AGE RANGE */

.dagac-age-range{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.dagac-number-field{
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #d0d5dd;
    border-radius:10px;
    background:#fff;
}

.dagac-number-field:focus-within{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(249,115,22,.08);
}

.dagac-number-field input{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:0 12px !important;
    margin:0 !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    color:var(--navy);
    font-family:inherit;
    font-size:14px;
}

.dagac-number-field span{
    padding-right:12px;
    color:#98a2b3;
    font-size:9px;
}


/* ERROR */

.dagac-error{
    padding:11px 13px;
    margin:5px 0 13px;
    border:1px solid var(--red-border);
    border-radius:9px;
    background:var(--red-soft);
    color:var(--red);
    font-size:10px;
    line-height:1.55;
}

.dagac-error[hidden]{
    display:none !important;
}


/* CALCULATE */

.dagac-calculate{
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 20px;
    border:0;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:750;
    cursor:pointer;
    transition:.2s ease;
}

.dagac-calculate:hover{
    background:var(--primary-dark);
    transform:translateY(-1px);
}

.dagac-calculate svg{
    width:18px;
    height:18px;
}


/* RESULT */

.dagac-result{
    padding-top:30px;
    margin-top:30px;
    border-top:1px solid var(--border);
}

.dagac-result[hidden]{
    display:none !important;
}

.dagac-result-top{
    text-align:center;
}

.dagac-success-icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 9px;
    border-radius:50%;
    background:var(--green-soft);
    color:var(--green);
}

.dagac-success-icon svg{
    width:25px;
    height:25px;
}

.dagac-result-top > span{
    display:block;
    color:#98a2b3;
    font-size:8px;
    font-weight:800;
    letter-spacing:1.1px;
}

.dagac-result-top h3{
    margin:6px 0 0;
    color:var(--navy);
    font-size:19px;
}


/* BIG AGE */

.dagac-age-display{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:25px 18px;
    margin:18px 0 10px;
    border:1px solid #fed7aa;
    border-radius:14px;
    background:linear-gradient(180deg,#fffaf5 0%,#fff7ed 100%);
}

.dagac-age-display > div:not(.dagac-separator){
    min-width:90px;
    text-align:center;
}

.dagac-age-display strong{
    display:block;
    color:var(--primary-dark);
    font-size:38px;
    line-height:1;
    font-weight:800;
}

.dagac-age-display span{
    display:block;
    margin-top:7px;
    color:#667085;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.dagac-separator{
    margin-top:-13px;
    color:#fdba74;
    font-size:26px;
    font-weight:700;
}

.dagac-age-sentence{
    margin:0;
    color:#667085;
    font-size:10px;
    text-align:center;
}

.dagac-age-sentence strong{
    color:#344054;
}


/* DETAILS */

.dagac-details{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:18px;
}

.dagac-details > div{
    padding:12px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--soft);
}

.dagac-details span{
    display:block;
    color:#98a2b3;
    font-size:8px;
}

.dagac-details strong{
    display:block;
    margin-top:4px;
    color:var(--navy);
    font-size:11px;
}


/* ELIGIBILITY */

.dagac-eligibility{
    display:flex;
    gap:11px;
    align-items:flex-start;
    padding:14px;
    margin-top:15px;
    border:1px solid var(--green-border);
    border-radius:11px;
    background:var(--green-soft);
}

.dagac-eligibility[hidden]{
    display:none !important;
}

.dagac-eligibility.not-eligible{
    border-color:var(--red-border);
    background:var(--red-soft);
}

.dagac-eligibility-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#dcfae6;
    color:var(--green);
    font-size:15px;
    font-weight:800;
}

.dagac-eligibility.not-eligible .dagac-eligibility-icon{
    background:#fee4e2;
    color:var(--red);
}

.dagac-eligibility span{
    display:block;
    color:var(--green);
    font-size:8px;
    font-weight:800;
    letter-spacing:.7px;
}

.dagac-eligibility.not-eligible span{
    color:var(--red);
}

.dagac-eligibility strong{
    display:block;
    margin-top:3px;
    color:var(--navy);
    font-size:12px;
}

.dagac-eligibility p{
    margin:3px 0 0;
    color:#475467;
    font-size:9px;
    line-height:1.55;
}


/* WARNING */

.dagac-warning{
    display:flex;
    gap:9px;
    padding:12px;
    margin-top:15px;
    border:1px solid var(--yellow-border);
    border-radius:9px;
    background:var(--yellow-soft);
}

.dagac-warning svg{
    flex:0 0 17px;
    width:17px;
    height:17px;
    margin-top:1px;
    color:var(--yellow);
}

.dagac-warning p{
    margin:0;
    color:#667085;
    font-size:9px;
    line-height:1.6;
}

.dagac-warning strong{
    color:var(--yellow);
}


/* RESET */

.dagac-reset{
    display:block;
    margin:14px auto 0;
    padding:7px 12px;
    border:0;
    background:transparent;
    color:#667085;
    font-family:inherit;
    font-size:9px;
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
}


/* FOOTER */

.dagac-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:20px;
    color:#98a2b3;
    font-size:8px;
    line-height:1.5;
    text-align:center;
}

.dagac-footer svg{
    flex:0 0 14px;
    width:14px;
    height:14px;
}


/* MOBILE */

@media(max-width:650px){

    .dagac-card{
        padding:23px 16px;
        border-radius:15px;
    }

    .dagac-header h2{
        font-size:24px;
    }

    .dagac-age-display{
        gap:9px;
        padding:22px 8px;
    }

    .dagac-age-display > div:not(.dagac-separator){
        min-width:70px;
    }

    .dagac-age-display strong{
        font-size:31px;
    }

}

@media(max-width:430px){

    .dagac-age-range{
        grid-template-columns:1fr;
    }

    .dagac-details{
        grid-template-columns:1fr 1fr;
    }

    .dagac-age-display{
        gap:5px;
    }

    .dagac-age-display > div:not(.dagac-separator){
        min-width:65px;
    }

    .dagac-age-display strong{
        font-size:28px;
    }

    .dagac-separator{
        font-size:20px;
    }

}