/* ==========================================================
   GLOBALTIME.IO
   Affiliate Components
   Hostinger + NordVPN
========================================================== */


/* ==========================================================
   Shared Affiliate Section
========================================================== */

.hostinger-section,
.nordvpn-banner-section{
    width:100%;
    margin:32px auto;
    text-align:center;
}


/* ==========================================================
   Shared Banner
========================================================== */

.hostinger-banner,
.nordvpn-banner{

    display:block;

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

    height:auto;

    margin:0 auto;

    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 8px 24px rgba(15,23,42,.12);

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

}

.hostinger-banner:hover,
.nordvpn-banner:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(15,23,42,.18);

}


/* ==========================================================
   Hostinger
========================================================== */

.hosting-label{

    margin:0 0 14px;

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:#94a3b8;

    text-align:center;

}

.hostinger-affiliate-box{

    width:100%;

    margin:0 auto 18px;

    text-align:center;

}

.hosting-text{

    max-width:760px;

    margin:18px auto;

    text-align:center;

    line-height:1.75;

    color:var(--text-dark);

}

body.dark-mode .hosting-text{

    color:var(--text-darkmode);

}

.hosting-cta{
    text-align:center;
    margin-top:20px;
}

.hosting-cta a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:240px;
    min-height:48px;
    padding:12px 24px;

    border-radius:999px;

    background:#2563eb !important;

    color:#ffffff !important;

    font-size:15px !important;
    font-weight:600;

    text-decoration:none !important;
    line-height:1;

    border:none;

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

    box-shadow:0 8px 20px rgba(37,99,235,.25);
}

.hosting-cta a:visited,
.hosting-cta a:hover,
.hosting-cta a:focus,
.hosting-cta a:active{

    color:#ffffff !important;
    text-decoration:none !important;
}

.hosting-cta a:hover{

    background:#1d4ed8 !important;

    transform:translateY(-2px);

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

}


/* ==========================================================
   NordVPN
========================================================== */

.nordvpn-banner-section a{

    display:inline-block;

    width:100%;

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    .hostinger-section,
    .nordvpn-banner-section{

        margin:24px auto;

    }

    .hostinger-banner,
    .nordvpn-banner{

        max-width:100%;

        border-radius:12px;

    }

    .hosting-text{

        padding:0 8px;

        font-size:.93rem;

        line-height:1.65;

    }

    .hosting-cta a{

        width:100%;

        max-width:320px;

    }

}


/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion:reduce){

    .hostinger-banner,
    .nordvpn-banner,
    .hosting-cta a{

        transition:none;

    }

}