/* RESET */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    -webkit-text-size-adjust:100%;
}

body{
    background:
        radial-gradient(circle at top left, rgba(97, 202, 255, 0.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(31, 92, 148, 0.22), transparent 30%),
        linear-gradient(135deg, #0b1f38 0%, #12365d 45%, #1f5c94 100%);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 18px;
    color:#0f2744;
}

/* CONTAINER */
.container{
    width:100%;
    max-width:960px;
}

/* CARD */
.card{
    position:relative;
    background:#fff;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    padding:42px;
    border-radius:24px;
    box-shadow:0 24px 60px rgba(4, 18, 36, 0.24);
    border:1px solid rgba(255,255,255,0.55);
    text-align:center;
}

.card--home{
    max-width:760px;
    margin:0 auto;
}

/* LOGO */
.logo{
    width:148px;
    height:auto;
    display:block;
    margin:0 auto 18px;
}

/* TITOLI */
.title{
    font-size:clamp(30px, 4vw, 46px);
    line-height:1.08;
    margin-bottom:14px;
    color:#1f5c94;
    font-weight:800;
    letter-spacing:-0.02em;
}

.subtitle{
    max-width:620px;
    margin:0 auto 28px;
    color:#516173;
    font-size:16px;
    line-height:1.55;
}

/* FORM */
.trackingForm{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

/* INPUT */
.input{
    padding:16px 18px;
    border-radius:14px;
    border:1px solid #d5deea;
    background:#ffffff;
    font-size:16px;
    width:320px;
    max-width:100%;
    outline:none;
    transition:border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.input:focus{
    border-color:#1f5c94;
    box-shadow:0 0 0 4px rgba(31, 92, 148, 0.12);
}

/* BOTTONE */
.button{
    padding:16px 24px;
    border:none;
    background:linear-gradient(135deg, #1f5c94 0%, #2f7ac0 100%);
    color:white;
    border-radius:14px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:0.25s;
    box-shadow:0 10px 24px rgba(31, 92, 148, 0.22);
}

.button:hover{
    background:linear-gradient(135deg, #143f6a 0%, #1f5c94 100%);
    transform:translateY(-1px);
}

/* INFO AREA */
.info{
    margin-top:28px;
    text-align:left;
}

/* ROW */
.row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:28px;
    padding:18px 0;
    border-bottom:1px solid #eef2f7;
}

/* LABEL */
.label{
    font-weight:700;
    color:#29415a;
    min-width:250px;
    line-height:1.45;
}

/* VALUE */
.value{
    color:#0f2744;
    font-weight:600;
    text-align:right;
    line-height:1.5;
    max-width:100%;
    word-break:break-word;
}

/* BADGE STATO */
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #1f5c94 0%, #2f7ac0 100%);
    color:white;
    padding:9px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    text-align:center;
    min-height:36px;
    box-shadow:0 10px 20px rgba(31, 92, 148, 0.16);
}

/* NOTE AREA */
.notes{
    margin-top:28px;
    text-align:left;
}

.notesTitle{
    font-weight:800;
    margin-bottom:12px;
    color:#1f5c94;
    font-size:18px;
    line-height:1.3;
}

.noteBox{
    background:#f3f7fb;
    border:1px solid #e4edf6;
    padding:18px;
    border-radius:16px;
    font-size:15px;
    color:#344054;
    line-height:1.65;
    word-break:break-word;
}

/* LINK */
a{
    color:#1f5c94;
    font-weight:600;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

/* MOBILE */
@media (max-width: 900px){
    .card{
        padding:34px 26px;
        border-radius:22px;
    }

    .label{
        min-width:200px;
    }
}

@media (max-width: 650px){
    body{
        padding:18px 12px;
        align-items:flex-start;
    }

    .container{
        max-width:100%;
    }

    .card{
        padding:28px 18px;
        border-radius:22px;
        box-shadow:0 16px 36px rgba(4, 18, 36, 0.2);
    }

    .logo{
        width:64px;
        margin-bottom:16px;
    }

    .title{
        font-size:42px;
        margin-bottom:12px;
    }

    .subtitle{
        font-size:15px;
        margin-bottom:22px;
    }

    .trackingForm{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .input{
        width:100%;
        font-size:16px;
        padding:16px;
        border-radius:14px;
    }

    .button{
        width:100%;
        padding:16px 18px;
        border-radius:14px;
    }

    .info{
        margin-top:22px;
    }

    .row{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        padding:16px 0;
    }

    .label{
        min-width:auto;
        width:100%;
        font-size:15px;
    }

    .value{
        width:100%;
        text-align:left;
        font-size:18px;
        font-weight:700;
    }

    .badge{
        font-size:13px;
        padding:10px 14px;
        max-width:100%;
        white-space:normal;
        text-align:left;
        justify-content:flex-start;
    }

    .notes{
        margin-top:22px;
    }

    .notesTitle{
        font-size:17px;
        margin-bottom:10px;
    }

    .noteBox{
        padding:16px;
        border-radius:14px;
        font-size:15px;
    }
}

/* MOBILE - SOLO OTTIMIZZAZIONE TELEFONO */
@media (max-width: 650px){

body{
padding:18px 10px;
align-items:flex-start;
}

.container{
max-width:100%;
}

.card{
padding:26px 18px;
border-radius:22px;
box-shadow:0 16px 36px rgba(0,0,0,0.20);
}

.logo{
width:58px;
margin-bottom:16px;
}

.title{
font-size:28px;
line-height:1.12;
margin-bottom:22px;
}

.trackingForm{
flex-direction:column;
align-items:stretch;
gap:12px;
}

.input{
width:100%;
font-size:16px;
padding:15px 16px;
border-radius:14px;
}

.button{
width:100%;
padding:15px 18px;
border-radius:14px;
font-size:16px;
}

.info{
margin-top:22px;
}

.row{
flex-direction:column;
align-items:flex-start;
gap:8px;
padding:16px 0;
}

.label{
min-width:auto;
width:100%;
font-size:15px;
line-height:1.35;
}

.value{
width:100%;
text-align:left;
font-size:17px;
line-height:1.45;
word-break:break-word;
}

.badge{
display:inline-block;
max-width:100%;
white-space:normal;
word-break:break-word;
line-height:1.35;
padding:10px 14px;
border-radius:16px;
font-size:14px;
text-align:left;
}

.notes{
margin-top:22px;
}

.notesTitle{
font-size:17px;
margin-bottom:10px;
}

.noteBox{
padding:15px;
font-size:14px;
line-height:1.6;
border-radius:14px;
}

}