/* SysAutomator BananaVPN 4.2.5: contrast + compact responsive home/checkout.
   Explicit foreground/background pairs prevent customized or inherited colors
   from producing black-on-black or white-on-white content. */
.banana-vpn-template .banana-hero h1{
    font-size:clamp(2.55rem,4.7vw,4.2rem)!important;
    line-height:1.07!important;
}
.banana-vpn-template :is(.banana-plan__copy h2,.banana-network__copy h2,.banana-heading h2){
    font-size:clamp(2rem,3.8vw,3.25rem)!important;
    line-height:1.08!important;
}
.banana-vpn-template .banana-community h2{
    font-size:clamp(2rem,3.7vw,3.2rem)!important;
    line-height:1.08!important;
}

/* Home: light cards always use dark text. */
.banana-vpn-template :is(
    .template-product,
    .banana-benefits article,
    .template-product-categories a,
    .template-how-to__steps article,
    .template-knowledgebase-articles article,
    .template-announcements article,
    .banana-country-card,
    .banana-server-card
){
    background:#fff!important;
    color:#08090b!important;
}
.banana-vpn-template :is(
    .template-product,
    .banana-benefits article,
    .template-product-categories a,
    .template-how-to__steps article,
    .template-knowledgebase-articles article,
    .template-announcements article,
    .banana-country-card,
    .banana-server-card
) :is(h1,h2,h3,h4,strong,b,label,dt,dd){
    color:#08090b!important;
}
.banana-vpn-template :is(
    .template-product,
    .banana-benefits article,
    .template-product-categories a,
    .template-how-to__steps article,
    .template-knowledgebase-articles article,
    .template-announcements article
) :is(p,small,em){
    color:#5f6772!important;
}

/* Dark surfaces always use light text. */
.banana-vpn-template .banana-community{
    background:#101728!important;
    color:#fff!important;
}
.banana-vpn-template .banana-community :is(h1,h2,h3,p,span,strong,small){
    color:#fff!important;
}
.banana-vpn-template .banana-btn--black{
    background:#08090b!important;
    border-color:#08090b!important;
    color:#fff!important;
}
.banana-vpn-template .banana-btn--black :is(span,strong,small){
    color:#fff!important;
}
.banana-vpn-template .banana-btn--outline,
.banana-vpn-template .banana-btn--white{
    background:#fff!important;
    color:#08090b!important;
}
.banana-vpn-template .banana-btn--yellow{
    background:#f4dd00!important;
    border-color:#f4dd00!important;
    color:#08090b!important;
}

/* Checkout: keep the checkout shell light and readable regardless of a customized
   main-text/panel color. Dark headers/buttons get an explicit white foreground. */
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template :is(
    .whmcs-account-selector,
    .whmcs-account-option,
    .whmcs-billing-collapsible details,
    .whmcs-client-account-box,
    .checkout-manual-card,
    .checkout-saved-methods,
    .checkout-saved-method,
    .checkout-signature-panel,
    .whmcs-order-summary
){
    background:#fff!important;
    border-color:#d9dee3!important;
    color:#15181d!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template :is(
    .whmcs-account-option,
    .whmcs-billing-collapsible details,
    .whmcs-client-account-box,
    .checkout-manual-card,
    .checkout-saved-methods,
    .checkout-saved-method,
    .checkout-signature-panel,
    .whmcs-order-summary__body
) :is(h1,h2,h3,h4,label,strong,b,dt,dd,span:not(.notice):not(.badge)){
    color:#15181d!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template :is(
    .whmcs-account-help,
    .whmcs-login-hint,
    .whmcs-account-option small,
    .checkout-saved-method small,
    .checkout-manual-card small,
    .whmcs-order-summary__body em,
    .whmcs-checkout-line small,
    .whmcs-checkout-summary dd small,
    .field-help,
    .muted
){
    color:#626b75!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template .whmcs-account-option.is-muted{
    background:#f4f4f1!important;
    color:#626b75!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template .checkout-saved-method:has(input:checked){
    background:#fffbea!important;
    border-color:#d8bf19!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template .whmcs-billing-collapsible summary{
    background:#f4f4f1!important;
    border-color:#d9dee3!important;
    color:#15181d!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template .whmcs-order-summary h2{
    background:#101728!important;
    border-color:#101728!important;
    color:#fff!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template .whmcs-order-summary h2 *{
    color:#fff!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template :is(
    .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    .field select,
    .field textarea,
    .coupon-input input,
    .checkout-manual-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    .checkout-manual-card select,
    .checkout-manual-card textarea
){
    background:#fff!important;
    border-color:#cfd6dc!important;
    color:#15181d!important;
    caret-color:#15181d!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template :is(input,textarea)::placeholder{
    color:#7a838d!important;
    opacity:1!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template :is(
    .whmcs-complete-order-button,
    .whmcs-coupon-field .button:not(.button-secondary)
){
    background:#08090b!important;
    border-color:#08090b!important;
    color:#fff!important;
}
body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template :is(
    .button.button-secondary,
    .button-secondary
){
    background:#fff!important;
    border-color:#bfc7cf!important;
    color:#15181d!important;
}

/* Phone: smaller typography and compact buttons; do not stretch every CTA to a
   giant full-width block. */
@media(max-width:650px){
    .banana-vpn-template .banana-inner{
        width:min(100% - 24px,1240px)!important;
    }
    .banana-vpn-template .banana-hero{
        min-height:auto!important;
        padding:30px 0 28px!important;
        gap:.8rem!important;
    }
    .banana-vpn-template .banana-hero h1{
        font-size:clamp(2rem,9.5vw,2.75rem)!important;
        line-height:1.08!important;
        letter-spacing:-.035em!important;
        margin:.9rem 0 .7rem!important;
    }
    .banana-vpn-template .banana-hero__content>p{
        font-size:.94rem!important;
        line-height:1.55!important;
    }
    .banana-vpn-template :is(.banana-plan__copy h2,.banana-network__copy h2,.banana-heading h2,.banana-community h2){
        font-size:clamp(1.75rem,7.8vw,2.3rem)!important;
        line-height:1.1!important;
    }
    .banana-vpn-template .banana-actions{
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        gap:.55rem!important;
    }
    .banana-vpn-template .banana-btn{
        width:auto!important;
        max-width:100%!important;
        min-height:44px!important;
        padding:.68rem 1rem!important;
        font-size:.86rem!important;
        line-height:1.2!important;
        white-space:normal!important;
        text-align:center!important;
    }
    .banana-vpn-template .banana-actions .banana-btn{
        flex:0 1 auto!important;
    }
    .banana-vpn-template .banana-trust{
        align-items:flex-start!important;
        gap:.45rem!important;
    }
    .banana-vpn-template .banana-trust span{
        width:auto!important;
        max-width:100%!important;
        padding:.5rem .7rem!important;
        font-size:.78rem!important;
    }
    .banana-vpn-template .banana-section{
        padding:42px 0!important;
    }
    .banana-vpn-template .banana-page-hero{
        padding:34px 0!important;
    }
    .banana-vpn-template .banana-page-hero h1{
        font-size:clamp(1.9rem,9vw,2.7rem)!important;
        letter-spacing:-.035em!important;
    }
    body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template .whmcs-complete-order-button{
        width:100%!important;
        min-width:0!important;
        min-height:46px!important;
        padding:.72rem 1rem!important;
        font-size:.95rem!important;
    }
    body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template .whmcs-payment-radio-row{
        gap:.55rem!important;
    }
    body.template-template-vpn-provider-shield:not(.is-admin) .banana-vpn-template .whmcs-payment-radio-row label{
        min-height:42px!important;
        padding:.55rem .7rem!important;
        font-size:.88rem!important;
    }
}

/* BananaVPN 4.2.6 responsive/header/button correction.
   Kept CSS-only because Marketplace template packages intentionally do not execute JavaScript. */
body.template-template-vpn-provider-shield{overflow-x:hidden}
.banana-header__inner{flex-wrap:nowrap!important}
.banana-header__content{min-width:0}
.banana-brand{min-width:0!important}
.banana-brand span{min-width:0}
.banana-btn,
.banana-header .template-navigation a,
.banana-header .template-client-actions a,
.template-template-vpn-provider-shield .template-button,
.template-template-vpn-provider-shield button{
  position:relative;
  overflow:hidden;
  transition:transform .16s ease,box-shadow .2s ease,filter .2s ease,background-color .2s ease!important
}
.banana-btn::after,
.banana-header .template-navigation a::after,
.banana-header .template-client-actions a::after,
.template-template-vpn-provider-shield .template-button::after{
  content:"";position:absolute;pointer-events:none;top:-80%;bottom:-80%;width:36%;left:-55%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transition:left .42s ease
}
.banana-btn:hover::after,
.banana-header .template-navigation a:hover::after,
.banana-header .template-client-actions a:hover::after,
.template-template-vpn-provider-shield .template-button:hover::after{left:125%}
.banana-btn:hover,
.banana-header .template-navigation a:hover,
.banana-header .template-client-actions a:hover,
.template-template-vpn-provider-shield .template-button:hover{transform:translateY(-2px);filter:saturate(1.06)}
.banana-btn:active,
.banana-header .template-navigation a:active,
.banana-header .template-client-actions a:active,
.template-template-vpn-provider-shield .template-button:active,
.template-template-vpn-provider-shield button:active{transform:translateY(0) scale(.965)!important}
.banana-btn:focus-visible,
.banana-header a:focus-visible,
.template-template-vpn-provider-shield button:focus-visible,
.template-template-vpn-provider-shield input:focus-visible,
.template-template-vpn-provider-shield select:focus-visible{
  outline:3px solid rgba(248,223,8,.55)!important;outline-offset:3px!important
}
.banana-btn.is-success,.banana-btn[data-state="success"],
.template-template-vpn-provider-shield .is-success{animation:bananaSuccessPulse .55s ease}
@keyframes bananaSuccessPulse{
  50%{box-shadow:0 0 0 8px rgba(248,223,8,.22),0 10px 28px rgba(0,0,0,.16)}
}

@media(max-width:1100px){
  .banana-hero{
    grid-template-columns:1fr!important;min-height:auto!important;
    padding:46px 0 38px!important;gap:28px!important
  }
  .banana-hero__content{max-width:720px!important}
  .banana-hero h1{
    max-width:720px!important;
    font-size:clamp(2.35rem,6.6vw,3.6rem)!important;
    line-height:1.02!important;letter-spacing:-.045em!important;
    margin:1rem 0 .8rem!important
  }
  .banana-hero__content>p{font-size:.96rem!important;line-height:1.58!important}
  .banana-hero__art{
    min-height:auto!important;width:min(720px,100%)!important;
    margin:0 auto!important;padding:0!important
  }
  .banana-hero__media{width:min(100%,620px)!important}
}
@media(max-width:900px){
  .banana-header__inner{
    display:grid!important;grid-template-columns:minmax(0,1fr) 46px!important;
    gap:.5rem!important;width:min(100% - 20px,1320px)!important;
    min-height:66px!important;padding:8px 0!important
  }
  .banana-brand{grid-column:1!important;max-width:100%!important}
  .banana-brand img{width:40px!important;height:40px!important}
  .banana-brand strong{font-size:.94rem!important}
  .banana-brand small{font-size:.6rem!important}
  .banana-menu-button{
    grid-column:2!important;display:grid!important;place-items:center!important;
    margin:0!important;width:44px!important;height:44px!important;border-radius:12px!important
  }
  .banana-menu-button span,.banana-menu-button span::before,.banana-menu-button span::after{
    transition:transform .2s ease,opacity .2s ease,background .2s ease
  }
  .banana-menu-check:checked~.banana-menu-button span{background:transparent!important}
  .banana-menu-check:checked~.banana-menu-button span::before{top:0!important;transform:rotate(45deg)}
  .banana-menu-check:checked~.banana-menu-button span::after{top:0!important;transform:rotate(-45deg)}
  .banana-header__content{
    grid-column:1/-1!important;display:none!important;width:100%!important;
    padding:.55rem 0 .75rem!important;border-top:1px solid #ecece7!important;
    gap:.45rem!important;align-items:stretch!important;animation:bananaMenuIn .18s ease-out
  }
  .banana-menu-check:checked~.banana-header__content{display:grid!important}
  .banana-header__content .template-navigation,
  .banana-header__content .template-client-actions{
    width:100%!important;display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.4rem!important;align-items:stretch!important;overflow:visible!important
  }
  .banana-header__content .template-navigation a,
  .banana-header__content .template-client-actions a,
  .banana-header__content .template-language-picker summary{
    min-width:0!important;min-height:42px!important;padding:.6rem .64rem!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    text-align:center!important;white-space:normal!important;
    font-size:.79rem!important;line-height:1.15!important;border-radius:10px!important
  }
  .banana-header__content .template-language-picker{width:100%!important}
  .banana-header__content .template-language-picker>div{
    left:0!important;right:auto!important;top:calc(100% + .25rem)!important;
    max-width:min(300px,88vw)!important
  }
}
@media(max-width:650px){
  .banana-inner{width:min(100% - 22px,1240px)!important}
  .banana-header__inner{width:min(100% - 16px,1320px)!important}
  .banana-brand img{width:36px!important;height:36px!important}
  .banana-brand small{display:none!important}
  .banana-hero{padding:30px 0 28px!important;gap:18px!important}
  .banana-mark{font-size:.62rem!important;padding:.43rem .62rem!important}
  .banana-hero h1{
    font-size:clamp(2rem,9.2vw,2.55rem)!important;
    line-height:1.02!important;letter-spacing:-.04em!important
  }
  .banana-hero__content>p{font-size:.9rem!important;line-height:1.52!important}
  .banana-actions{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.5rem!important;margin:1.15rem 0!important
  }
  .banana-actions .banana-btn{
    width:100%!important;min-width:0!important;min-height:44px!important;
    padding:.62rem .62rem!important;font-size:.78rem!important;
    line-height:1.15!important;white-space:normal!important
  }
  .banana-trust{
    flex-direction:row!important;align-items:flex-start!important;
    display:flex!important;gap:.35rem!important
  }
  .banana-trust span{font-size:.68rem!important;padding:.38rem .48rem!important}
  .banana-hero__art{min-height:0!important}
  .banana-section{padding:46px 0!important}
}
@media(max-width:390px){
  .banana-header__content .template-navigation,
  .banana-header__content .template-client-actions{grid-template-columns:1fr 1fr!important}
  .banana-actions{grid-template-columns:1fr 1fr!important}
  .banana-actions .banana-btn{font-size:.73rem!important;padding:.58rem .5rem!important}
}
@keyframes bananaMenuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}