/* Semester Saver referrals */

/* Hostinger-style referral chip that referrals.js mounts beside the Astra logo. */
.ss-referral-header-cta{
    display:none;
    align-items:center;
    gap:7px;
    width:max-content;
    flex:0 0 auto;
    margin-left:14px;
    padding:8px 13px;
    border:1px solid rgba(37,95,229,.10);
    border-radius:999px;
    background:linear-gradient(135deg,#f2efff 0%,#edf4ff 100%);
    color:#255fe5!important;
    font-size:13px;
    line-height:1;
    font-weight:750;
    letter-spacing:-.01em;
    text-decoration:none!important;
    white-space:nowrap;
    box-shadow:0 1px 2px rgba(25,40,75,.04);
    transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
    position:relative;
    z-index:20;
}
.ss-referral-header-cta.ss-referral-header-cta--mounted{display:inline-flex}
.ss-referral-header-cta:hover,
.ss-referral-header-cta:focus-visible{
    color:#174dc4!important;
    background:linear-gradient(135deg,#ebe7ff 0%,#e5efff 100%);
    box-shadow:0 5px 14px rgba(37,95,229,.13);
    transform:translateY(-1px);
}
.ss-referral-header-cta__icon{width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 17px}
.ss-referral-header-cta__icon svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Keep the button aligned naturally when Astra's left section uses flex. */
.site-header-primary-section-left .ss-referral-header-cta,
.main-header-container .ss-referral-header-cta{align-self:center}

/* Referral landing page. */
.ss-referral-page .entry-header,
.ss-referral-page .entry-title{display:none!important}
.ss-referral-page-wrap{max-width:920px;margin:40px auto 70px;padding:0 18px}
.ss-referral-card{background:#fff;border:1px solid #e6e9ef;border-radius:18px;padding:28px;box-shadow:0 8px 28px rgba(13,88,227,.06)}
.ss-referral-card--hero{text-align:center}
.ss-referral-card h1{font-size:clamp(30px,5vw,48px);line-height:1.08;margin:0 auto 14px;max-width:760px}
.ss-referral-card p{font-size:17px;line-height:1.6;color:#505764}
.ss-referral-link-box{display:flex;gap:10px;max-width:720px;margin:24px auto 12px}
.ss-referral-link{flex:1;min-width:0;border:1px solid #cfd6e3!important;border-radius:10px!important;padding:13px 14px!important;background:#f8fafc!important}
.ss-referral-copy,.ss-referral-whatsapp{border:0;border-radius:10px;background:#0d58e3;color:#fff!important;font-weight:800;padding:13px 18px;cursor:pointer;text-decoration:none!important;display:inline-flex;align-items:center;justify-content:center}
.ss-referral-whatsapp{background:#131313}
.ss-referral-actions{display:flex;justify-content:center;margin-top:12px}
.ss-referral-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.ss-referral-stats>div{background:#f7f9fc;border:1px solid #e8ebf1;border-radius:14px;padding:20px;text-align:center}
.ss-referral-stats strong{display:block;font-size:28px;color:#0d58e3}
.ss-referral-stats span{display:block;font-size:13px;color:#626b78;margin-top:4px}
.ss-referral-card--rules{margin-top:18px}
.ss-referral-card--rules h2{margin-top:0}
.ss-referral-card--rules li{margin:9px 0}

/* Mobile gets a separate full-width banner below the header. */
.ss-referral-mobile-banner{
    display:none;
    width:100%;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    padding:9px 16px;
    border:0;
    border-bottom:1px solid rgba(37,95,229,.10);
    background:linear-gradient(90deg,#f3f0ff 0%,#eef5ff 100%);
    color:#255fe5!important;
    font-size:13px;
    line-height:1.15;
    font-weight:750;
    letter-spacing:-.01em;
    text-align:center;
    text-decoration:none!important;
    box-sizing:border-box;
    position:relative;
    z-index:18;
}
.ss-referral-mobile-banner:hover,
.ss-referral-mobile-banner:focus-visible{
    color:#174dc4!important;
    background:linear-gradient(90deg,#ede9ff 0%,#e7f0ff 100%);
}
.ss-referral-mobile-banner__icon{
    width:16px;
    height:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 16px;
}
.ss-referral-mobile-banner__icon svg{
    width:16px;
    height:16px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.ss-referral-mobile-banner__arrow{
    width:14px;
    height:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 14px;
}
.ss-referral-mobile-banner__arrow svg{
    width:14px;
    height:14px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media(max-width:921px){
    .ss-referral-header-cta{display:none!important}
    .ss-referral-mobile-banner.ss-referral-mobile-banner--mounted{display:flex}
}

@media(min-width:922px){
    .ss-referral-mobile-banner{display:none!important}
}

@media(max-width:640px){
    .ss-referral-mobile-banner{
        min-height:38px;
        padding:8px 12px;
        font-size:12.5px;
        gap:6px;
    }
    .ss-referral-link-box{flex-direction:column}
    .ss-referral-stats{grid-template-columns:1fr}
    .ss-referral-card{padding:22px 18px}
    .ss-referral-page-wrap{margin-top:24px}
}

@media(max-width:360px){
    .ss-referral-mobile-banner{
        padding-left:9px;
        padding-right:9px;
        font-size:12px;
        gap:5px;
    }
    .ss-referral-mobile-banner__icon{width:15px;height:15px;flex-basis:15px}
    .ss-referral-mobile-banner__icon svg{width:15px;height:15px}
}