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

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

body{
    font-family:'Lora',serif;
    min-height:100vh;
    overflow-x:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px 20px;

    background-image:
        linear-gradient(
            rgba(0,0,0,0.72),
            rgba(0,0,0,0.78)
        ),
        url("../images/predictor.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    position:relative;
}

/* =========================================
   BACKGROUND EFFECTS
========================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;

    background:
    linear-gradient(
        120deg,
        rgba(255,180,80,0.05),
        transparent,
        rgba(255,180,80,0.04)
    );

    z-index:-3;
}

body::after{
    content:"";
    position:fixed;
    width:900px;
    height:900px;

    background:radial-gradient(
        circle,
        rgba(255,170,70,0.15),
        transparent 70%
    );

    top:-300px;
    right:-200px;

    filter:blur(80px);

    z-index:-2;
}

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

.predictor-wrapper{

    width:100%;
    max-width:1150px;

    padding:60px;

    border-radius:38px;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(24px);

    background:
    linear-gradient(
        135deg,
        rgba(28,14,8,0.94),
        rgba(8,4,2,0.96)
    );

    border:4.5px solid rgba(255, 196, 120, 0.55);

    box-shadow:

    /* OUTER DARK DEPTH */
    0 30px 80px rgba(0,0,0,0.65),

    /* GOLD OUTER GLOW */
    0 0 25px rgba(255,170,70,0.22),
    0 0 55px rgba(255,170,70,0.16),
    0 0 120px rgba(255,170,70,0.08),

    /* INNER GOLD LIGHT */
    inset 0 0 25px rgba(255,200,120,0.05),

    /* INNER DARK DEPTH */
    inset 0 0 80px rgba(0,0,0,0.35);

    transition:0.4s ease;
}

/* =========================================
   PREMIUM GLOWING BORDER
========================================= */

.predictor-wrapper::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:40px;

    padding:1.5px;

    background:
    linear-gradient(
        135deg,
        rgba(255,230,180,0.9),
        rgba(255,180,70,0.5),
        rgba(255,230,180,0.85)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0.9;

    filter:blur(0.4px);

    pointer-events:none;
}

/* =========================================
   AMBIENT OUTER GLOW
========================================= */

.predictor-wrapper::after{

    content:"";

    position:absolute;

    width:120%;
    height:120%;

    top:-10%;
    left:-10%;

    background:
    radial-gradient(
        circle,
        rgba(255,170,70,0.12),
        transparent 65%
    );

    z-index:-1;

    filter:blur(70px);

    animation:glowPulse 5s ease-in-out infinite;
}

/* =========================================
   HOVER EFFECT
========================================= */

.predictor-wrapper:hover{

    box-shadow:

    0 40px 100px rgba(0,0,0,0.7),

    0 0 35px rgba(255,180,80,0.28),
    0 0 70px rgba(255,180,80,0.18),
    0 0 140px rgba(255,180,80,0.12),

    inset 0 0 30px rgba(255,210,140,0.08);
}

/* =========================================
   GLOW ANIMATION
========================================= */

@keyframes glowPulse{

    0%{
        opacity:0.5;
        transform:scale(1);
    }

    50%{
        opacity:0.9;
        transform:scale(1.03);
    }

    100%{
        opacity:0.5;
        transform:scale(1);
    }
}

/* =========================================
   TOP TAG
========================================= */

.top-tag{

    width:max-content;

    margin:0 auto 30px;

    padding:12px 28px;

    border-radius:999px;

    border:1px solid rgba(255,200,120,0.35);

    background:
    linear-gradient(
        135deg,
        rgba(255,180,90,0.08),
        rgba(255,140,50,0.04)
    );

    color:#f0c58b;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

    font-weight:500;

    box-shadow:
    inset 0 0 10px rgba(255,180,100,0.08),
    0 0 20px rgba(255,170,70,0.08);
}

/* =========================================
   HEADING
========================================= */

h1{

    text-align:center;

    font-family:'Lora',serif;

    font-size:50px;

    line-height:1;

    font-weight:700;

    color:#fff;

    margin-bottom:22px;

    text-shadow:
    0 0 15px rgba(255,220,180,0.08);
}

/* =========================================
   SUBTITLE
========================================= */

.subtitle{

    max-width:850px;

    margin:0 auto 40px;

    text-align:center;

    line-height:1.8;

    font-size:15px;

    color:#d1b28d;
}

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

form{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:28px;
}

.form-group label{

    display:block;

    margin-bottom:12px;

    color:#fff;

    font-size:18px;

    font-weight:500;
}

/* =========================================
   INPUT GROUP
========================================= */

.input-group{
    position:relative;
}

select,
input{

    width:100%;

    height:45px;

    padding:0 24px;

    border-radius:18px;

    border:2px solid rgba(255,196,120,0.45);

    background:
    linear-gradient(
        135deg,
        rgba(50,22,10,0.75),
        rgba(20,8,3,0.88)
    );

    color:#f7d5a8;

    font-size:20px;

    outline:none;

    appearance:none;

    transition:0.35s ease;

    box-shadow:
    inset 0 0 10px rgba(255,180,100,0.04);
}

select:focus,
input:focus{

    border-color:#ffcc8a;

    box-shadow:
    0 0 25px rgba(255,180,90,0.2),
    inset 0 0 10px rgba(255,190,120,0.06);
}

/* =========================================
   DROPDOWN ICON
========================================= */

.dropdown-btn{

    position:absolute;

    top:50%;
    right:22px;

    transform:translateY(-50%);

    pointer-events:none;
}

.arrow{

    border:solid #e7ba7c;

    border-width:0 3px 3px 0;

    display:inline-block;

    padding:5px;

    transform:rotate(45deg);
}

/* =========================================
   FULL WIDTH
========================================= */

.full-width{
    grid-column:span 2;
}

/* =========================================
   SCORE INPUT
========================================= */

.centered-block{
    max-width:100%;
}

.centered-block label{
    text-align:center;
}

.centered-block input{
    text-align:left;
}

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

.predict-btn{

    grid-column:span 2;

    height:63px;

    border:none;

    border-radius:20px;

    cursor:pointer;

    font-size:24px;

    font-weight:700;

    font-family:'Cormorant Garamond',serif;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #3d1f0e,
        #6d3b17,
        #3b1d0c
    );

    border:2px solid rgba(255,200,130,0.5);

    box-shadow:
    0 0 25px rgba(255,170,70,0.2),
    inset 0 0 15px rgba(255,220,170,0.08);

    transition:0.35s ease;
}

.predict-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 35px rgba(255,180,80,0.35),
    0 15px 40px rgba(0,0,0,0.45);
}

/* =========================================
   RESULT CARDS
========================================= */

#predictionResults{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:28px;
}

.result-card{

    padding:32px;

    border-radius:26px;

    background:
    linear-gradient(
        135deg,
        rgba(45,20,10,0.95),
        rgba(20,10,5,0.95)
    );

    border:1px solid rgba(255,200,130,0.25);

    box-shadow:
    0 0 30px rgba(255,170,70,0.08);

    transition:0.3s ease;
}

.result-card:hover{

    transform:translateY(-6px);

    border-color:rgba(255,220,180,0.4);

    box-shadow:
    0 0 35px rgba(255,180,80,0.16);
}

.result-card h2{

    font-size:28px;

    margin-bottom:14px;

    color:#fff;
}

/* =========================================
   TAGS
========================================= */

.tag{

    display:inline-block;

    padding:8px 14px;

    border-radius:12px;

    margin-bottom:18px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;
}

.safe{
    background:rgba(34,197,94,0.14);
    color:#6fffb1;
}

.moderate{
    background:rgba(255,180,0,0.12);
    color:#ffd36d;
}

.dream{
    background:rgba(255,90,90,0.12);
    color:#ff9a9a;
}

/* =========================================
   ANALYSIS BOX
========================================= */

.analysis-box{

    margin:20px 0;

    padding:20px;

    border-radius:18px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.05);

    color:#e7c39d;

    line-height:1.7;
}

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

@media(max-width:768px){

    .predictor-wrapper{
        padding:35px 20px;
    }

    form{
        grid-template-columns:1fr;
    }

    .full-width,
    .predict-btn{
        grid-column:span 1;
    }

    h1{
        font-size:48px;
    }

    .subtitle{
        font-size:16px;
    }

    select,
    input{
        height:62px;
        font-size:16px;
    }
}

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

.card-header{

    margin-bottom:18px;
}

.location-tag{

    display:inline-block;

    margin-top:8px;

    padding:6px 14px;

    border-radius:999px;

    font-size:13px;

    color:#e7ba7c;

    background:
    rgba(255,190,120,0.08);

    border:
    1px solid rgba(255,190,120,0.18);
}

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

.details-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-top:20px;
}

.details-grid p{

    padding:14px;

    border-radius:16px;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(255,255,255,0.05);

    color:#e7ba7c;

    font-size:15px;

    line-height:1.6;
}

.details-grid strong{

    color:#ffd7a3;

    font-weight:600;
}

/* =========================================
   PACKAGE INFO
========================================= */

.package-info{

    margin-top:18px;

    padding:16px 18px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        rgba(255,180,90,0.06),
        rgba(255,120,50,0.03)
    );

    border:
    1px solid rgba(255,190,120,0.12);

    color:#e7ba7c;

    line-height:1.8;

    font-size:15px;
}

.package-info strong{

    color:#ffd7a3;
}

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

.result-footer{

    margin-top:22px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

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

.probability{

    width:100%;

    padding:16px 18px;

    border-radius:18px;

    text-align:center;

    background:
    rgba(255,190,120,0.08);

    border:
    1px solid rgba(255,190,120,0.18);

    color:#e7ba7c;

    font-size:16px;

    font-weight:500;
}

.probability strong{

    color:#ffd7a3;

    font-size:18px;
}

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

@media(max-width:768px){

    .details-grid{

        grid-template-columns:1fr;
    }

    .result-footer{

        flex-direction:column;

        gap:15px;
    }
}