/* =========================================
INDEX PAGE
========================================= */

.vat-headline{

    text-align:center;

    font-size:1rem;

    color:#6b7280;

    margin-top:30px;

    line-height:1.5;

    font-weight:500;
}

.vat-trust{

    text-align:center;

    font-size:0.72rem;

    color:#9ca3af;

    margin-top:12px;

    line-height:1.5;
}

/* =========================================
VAT CHECK
========================================= */

.vat-wrapper{

    display:flex;

    margin:22px auto 0;

    overflow:hidden;

    border-radius:10px;

    border:1px solid #e5e7eb;

    background:white;

    max-width:280px;

    width:100%;

    box-shadow:0 6px 18px rgba(
        0,
        0,
        0,
        0.03
    );
}

.vat-input{

    flex:1;

    border:none;

    padding:10px 12px;

    font-size:0.82rem;

    outline:none;

    color:#111827;

    background:white;
}

.vat-input::placeholder{
    color:#9ca3af;
}

.vat-btn-inline{

    border:none;

    background:#6366f1;

    color:white;

    padding:0 14px;

    cursor:pointer;

    font-size:0.72rem;

    font-weight:600;

    transition:0.15s;

    white-space:nowrap;
}

.vat-btn-inline:hover{
    opacity:0.94;
}

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

.result{

    margin-top:18px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;
}

.result-card{

    margin:14px auto 0;

    background:white;

    border-radius:16px;

    padding:16px;

    border:1px solid #e5e7eb;

    box-shadow:0 8px 24px rgba(
        0,
        0,
        0,
        0.03
    );

    max-width:280px;

    width:100%;

    text-align:center;
}

.result-ok{

    border-color:#86efac;

    background:#f0fdf4;
}

.result-error{

    border-color:#fecaca;

    background:#fef2f2;
}

/* =========================================
SWISS WARNING
========================================= */

.result-warning{

    border-color:#fcd34d;

    background:#fef3c7;

    color:#374151;
}

.result-title{

    font-size:0.82rem;

    font-weight:700;

    margin-bottom:12px;

    text-align:center;
}

.result-line{

    font-size:0.74rem;

    color:#4b5563;

    margin-top:7px;

    line-height:1.6;

    text-align:center;
}

/* =========================================
FACT BOX
========================================= */

.fact-box{

    margin:82px auto 0;

    max-width:320px;

    padding:10px 14px;

    text-align:center;

    cursor:pointer;

    user-select:none;

    transition:0.18s;

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

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

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

    border-radius:16px;

    box-shadow:0 8px 22px rgba(
        0,
        0,
        0,
        0.035
    );
}

.fact-label{

    font-size:0.68rem;

    color:#9ca3af;

    margin-bottom:8px;

    letter-spacing:0.02em;
}

.fact-text{

    font-size:0.88rem;

    color:#374151;

    line-height:1.55;

    font-weight:600;
}

.fact-explain{

    margin-top:6px;

    font-size:0.72rem;

    color:#6b7280;

    line-height:1.45;
}

/* =========================================
SEO
========================================= */

.seo-text{

    margin-top:90px;

    text-align:center;

    font-size:0.72rem;

    color:#9ca3af;

    line-height:1.7;
}

.seo-link{

    color:#9ca3af;

    text-decoration:none;
}

.seo-link:hover{
    color:#6b7280;
}

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

.loading{

    opacity:0.6;

    pointer-events:none;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.loading-spinner{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;
}

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

@media (max-width:480px){

    .vat-headline{

        font-size:0.88rem;

        line-height:1.5;

        margin-top:26px;
    }

    .vat-trust{

        font-size:0.66rem;

        line-height:1.5;

        padding:0 8px;
    }

    .vat-wrapper{

        margin-top:18px;

        max-width:260px;
    }

    .vat-input{

        font-size:0.78rem;

        padding:9px 11px;
    }

    .vat-btn-inline{

        font-size:0.66rem;

        padding:0 11px;
    }

    .result-card{

        padding:14px;

        max-width:260px;
    }

    .result-title{
        font-size:0.78rem;
    }

    .result-line{
        font-size:0.72rem;
    }

   .fact-box{

    margin-top:70px;

    max-width:290px;

    padding:9px 12px;

    border-radius:14px;
}

    .fact-text{

        font-size:0.82rem;

        line-height:1.5;
    }

    .fact-explain{

        font-size:0.7rem;

        padding:0 10px;
    }

    .seo-text{

        margin-top:70px;

        line-height:1.6;
    }

}

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

.loading-btn{

    position:relative;

    overflow:hidden;

    opacity:0.9;

    pointer-events:none;
}

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

.loading-btn{

    opacity:0.72;

    pointer-events:none;

    animation:buttonPulse 1.2s infinite ease-in-out;
}

@keyframes buttonPulse{

    0%{
        opacity:0.72;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.72;
    }

}