/* ==========================================================
   STI Prediction Tool
   style.css
   Part 1
   ========================================================== */


/* ==========================================================
   RESET
   ========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* ==========================================================
   BODY
   ========================================================== */

body{

    font-family:'Inter',sans-serif;

    background:#F5F7FB;

    color:#1F2937;

    line-height:1.6;

    min-height:100vh;

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    width:min(1200px,92%);

    margin:auto;

    padding:40px 0 70px;

}


/* ==========================================================
   HERO
   ========================================================== */

.hero{

    background:linear-gradient(
        135deg,
        #2563EB,
        #1D4ED8
    );

    color:white;

    border-radius:18px;

    padding:45px;

    margin-bottom:35px;

    box-shadow:
        0 12px 28px
        rgba(37,99,235,.18);

}


.hero h1{

    font-size:2.35rem;

    font-weight:700;

    letter-spacing:-0.5px;

    margin-bottom:12px;

}


.hero p{

    font-size:1.05rem;

    opacity:.95;

    max-width:760px;

    line-height:1.7;

}


/* ==========================================================
   FORM
   ========================================================== */

form{

    display:flex;

    flex-direction:column;

    gap:28px;

}


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

.card{

    background:white;

    border-radius:16px;

    padding:32px;

    border:1px solid #E5E7EB;

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 14px 32px
        rgba(0,0,0,.08);

}


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

.section-header{

    margin-bottom:26px;

    padding-bottom:14px;

    border-bottom:2px solid #EFF4FA;

}


.section-header h2{

    font-size:1.35rem;

    font-weight:700;

    color:#1D4ED8;

}


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

.grid-2{

    display:grid;

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

    gap:24px;

}


/* ==========================================================
   FORM GROUP
   ========================================================== */

.form-group{

    display:flex;

    flex-direction:column;

}


/* ==========================================================
   LABELS
   ========================================================== */

.form-group label{

    font-size:.95rem;

    font-weight:600;

    color:#374151;

    margin-bottom:10px;

}


/* ==========================================================
   SUBTLE CARD ANIMATION
   ========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.card{

    animation:fadeIn .45s ease both;

}

/* ==========================================================
   INPUTS
   ========================================================== */

.form-group input,
.form-group select{

    width:100%;

    height:52px;

    padding:0 16px;

    border:1.5px solid #D1D5DB;

    border-radius:12px;

    background:#FFFFFF;

    color:#111827;

    font-size:.96rem;

    font-family:'Inter',sans-serif;

    outline:none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


/* ==========================================================
   INPUT PLACEHOLDER
   ========================================================== */

.form-group input::placeholder{

    color:#9CA3AF;

}


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

.form-group select{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    padding-right:46px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5' stroke='%236B7280' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:
        right 15px center;

    background-size:16px;

}


/* ==========================================================
   INPUT FOCUS
   ========================================================== */

.form-group input:focus,
.form-group select:focus{

    border-color:#2563EB;

    background:#FFFFFF;

    box-shadow:
        0 0 0 4px
        rgba(37,99,235,.12);

}


/* ==========================================================
   INVALID INPUT
   ========================================================== */

.form-group input:invalid,
.form-group select:invalid{

    border-color:#E5E7EB;

}


/* ==========================================================
   ACTION SECTION
   ========================================================== */

.action-section{

    display:flex;

    justify-content:center;

    margin-top:10px;

    margin-bottom:5px;

}


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

.predict-button{

    min-width:280px;

    height:60px;

    border:none;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #2563EB,
            #1D4ED8
        );

    color:#FFFFFF;

    font-size:1.05rem;

    font-weight:700;

    letter-spacing:.3px;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;

    box-shadow:
        0 12px 28px
        rgba(37,99,235,.28);

}


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

.predict-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 36px
        rgba(37,99,235,.35);

}


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

.predict-button:active{

    transform:scale(.98);

}


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

.predict-button:disabled{

    cursor:not-allowed;

    opacity:.6;

    transform:none;

    box-shadow:none;

}


/* ==========================================================
   LOADING PANEL
   ========================================================== */

.loading-panel{

    background:#FFFFFF;

    border-radius:16px;

    border:1px solid #E5E7EB;

    padding:35px;

    text-align:center;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.05);

}


/* ==========================================================
   SPINNER
   ========================================================== */

.spinner{

    width:58px;

    height:58px;

    margin:0 auto 20px;

    border:5px solid #E5E7EB;

    border-top:5px solid #2563EB;

    border-radius:50%;

    animation:spin 1s linear infinite;

}


@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   LOADING TEXT
   ========================================================== */

.loading-panel h3{

    color:#1D4ED8;

    font-size:1.3rem;

    margin-bottom:10px;

}


.loading-panel p{

    color:#6B7280;

    max-width:500px;

    margin:auto;

    line-height:1.7;

}

/* ==========================================================
   RESULT CARD
   ========================================================== */

.result-card{

    display:none;

    background:#FFFFFF;

    border-radius:18px;

    border:1px solid #E5E7EB;

    padding:42px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.06);

    animation:fadeIn .45s ease;

}


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

.result-header{

    text-align:center;

    margin-bottom:28px;

}


.result-header h2{

    font-size:1.7rem;

    color:#1D4ED8;

    font-weight:700;

}


/* ==========================================================
   PROBABILITY
   ========================================================== */

.probability-block{

    text-align:center;

    margin-bottom:34px;

}


.probability-title{

    color:#6B7280;

    font-size:1rem;

    margin-bottom:10px;

    text-transform:uppercase;

    letter-spacing:1px;

}


#probabilityValue{

    font-size:4.25rem;

    font-weight:800;

    color:#2563EB;

    line-height:1;

    letter-spacing:-2px;

}


/* ==========================================================
   INTERPRETATION
   ========================================================== */

.interpretation-block{

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:14px;

    padding:24px;

    margin-bottom:28px;

}


.interpretation-block h3{

    color:#1F2937;

    font-size:1.15rem;

    margin-bottom:12px;

}


.interpretation-block p{

    color:#4B5563;

    line-height:1.8;

}

   /* =========================================================
   DOWNLOAD PDF BUTTON
   Same appearance as Predict Risk
   ========================================================= */

.download-pdf-button {
    display: block;
    width: 280px;
    height: 60px;
    margin: 30px auto 0 auto;

    background: #2563eb;
    color: #ffffff;

    border: none;
    border-radius: 14px;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;

    text-align: center;
    cursor: pointer;

    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.20);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.download-pdf-button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
}

.download-pdf-button:active {
    transform: translateY(0);
}

/* ==========================================================
   MODEL INFORMATION
   ========================================================== */

.model-block{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #E5E7EB;

    padding-top:18px;

    color:#6B7280;

    font-size:.95rem;

}

.model-block strong{

    color:#1D4ED8;

    font-weight:700;

}


/* ==========================================================
   FOOTER
   ========================================================== */

footer{

    margin-top:50px;

    text-align:center;

    color:#6B7280;

    font-size:.9rem;

    line-height:1.8;

}


footer p:first-child{

    font-weight:700;

    color:#374151;

}


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

@media (max-width:992px){

    .container{

        width:94%;

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .hero{

        padding:35px;

    }

    .hero h1{

        font-size:2rem;

    }

    #probabilityValue{

        font-size:3.5rem;

    }

}


@media (max-width:768px){

    .container{

        width:95%;

        padding:20px 0 50px;

    }

    .hero{

        padding:28px;

        border-radius:14px;

    }

    .hero h1{

        font-size:1.7rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .card{

        padding:22px;

    }

    .section-header h2{

        font-size:1.2rem;

    }

    .predict-button{

        width:100%;

        min-width:0;

    }

    #probabilityValue{

        font-size:3rem;

    }

}


@media (max-width:480px){

    .hero{

        padding:22px;

    }

    .card{

        padding:18px;

    }

    .form-group input,

    .form-group select{

        height:48px;

        font-size:.92rem;

    }

    #probabilityValue{

        font-size:2.5rem;

    }

}


/* ==========================================================
   PRINT
   ========================================================== */

@media print{

    body{

        background:#FFFFFF;

    }

    .hero{

        box-shadow:none;

    }

    .card,

    .result-card{

        box-shadow:none;

        border:1px solid #D1D5DB;

    }

    .predict-button,

    .loading-panel{

        display:none !important;

    }

}