/* Arvexa Host client performance + mobile v2.6 */
html,body{width:100%;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video{max-width:100%;height:auto}
#orderbutton,#orderManager,.content-block{max-width:100%}

/* remove FOSSBilling branding links if a branding widget is still injected */
#orderbutton .small.text-muted:has(a[href*="fossbilling.org"]),
footer div:has(a[href*="fossbilling.org"]),
footer p:has(a[href*="fossbilling.org"]),
footer span:has(a[href*="fossbilling.org"]){display:none!important}

/* slightly lighter rendering */
.arvexa-product-card,.arvexa-addon-card{contain:layout paint}
.arvexa-product-card{content-visibility:auto;contain-intrinsic-size:360px}
.arvexa-addon-card{content-visibility:auto;contain-intrinsic-size:150px}

@media(max-width:991.98px){
  body>.container,
  body .container,
  body .container-md,
  body .container-lg,
  body .container-xl,
  body .container-xxl{
    width:100%!important;
    max-width:100%!important;
    padding-left:12px!important;
    padding-right:12px!important
  }

  header .navbar{padding-top:12px!important;padding-bottom:12px!important}
  header .navbar .container-fluid{padding-left:0!important;padding-right:0!important}
  header .navbar-collapse{padding-top:10px}
  header .navbar-nav{align-items:stretch!important;gap:3px}
  header .nav-item,header .nav-link,header .form-select{width:100%}
  header .nav-link{padding:10px 8px!important}

  #orderManager .accordion-body{padding:14px!important}
  #orderManager .accordion-button{padding:14px 15px!important;font-size:14px}
  #orderManager .row{--bs-gutter-x:.65rem}
  #orderManager [class*="col-md-"],
  #orderManager [class*="col-lg-"],
  #orderManager [class*="col-xl-"]{
    flex:0 0 100%!important;width:100%!important;max-width:100%!important
  }

  #period-selector,
  #orderManager .form-control,
  #orderManager .form-select{
    width:100%!important;max-width:100%!important;min-height:44px
  }
  #config-next{width:100%;min-height:44px;margin-top:9px}

  .arvexa-product-grid{grid-template-columns:1fr!important;gap:14px!important}
  .arvexa-product-card{
    min-height:0!important;padding:20px!important;border-radius:15px!important
  }
  .arvexa-product-card h4{font-size:20px!important;padding-right:82px!important}
  .arvexa-product-summary{font-size:13px!important;min-height:0!important;line-height:1.55!important}
  .arvexa-product-features{gap:7px!important}
  .arvexa-product-features li{font-size:12.5px!important;line-height:1.4!important}
  .arvexa-card-bottom{align-items:center!important;flex-wrap:wrap!important}
  .arvexa-price{font-size:28px!important}
  .arvexa-order-cta{font-size:12px!important}

  .arvexa-category{margin:30px 0 40px!important}
  .arvexa-category-head{align-items:flex-start!important}
  .arvexa-category-head h3{font-size:24px!important}
  .arvexa-category-head p{font-size:12.5px!important}
  .arvexa-category-icon{width:42px!important;height:42px!important;flex:0 0 42px}

  .arvexa-catalog-intro{padding:22px 18px!important;border-radius:16px!important}
  .arvexa-catalog-intro h2{font-size:29px!important}

  .arvexa-addons-grid{grid-template-columns:1fr!important}
  .arvexa-addon-card{padding:15px!important}
  .arvexa-addon-desc{min-height:0!important}
}

@media(max-width:575.98px){
  body>.container,body .container,body .container-fluid{
    padding-left:8px!important;padding-right:8px!important
  }
  .card,.accordion-item{border-radius:10px!important}
  .card-body{padding:11px!important}
  #orderManager .accordion-body{padding:10px!important}
  #orderManager h3{font-size:20px}
  #orderManager h4{font-size:18px}
  #orderManager table{display:block;width:100%;max-width:100%;overflow-x:auto;font-size:11.5px}
  #orderManager th,#orderManager td{padding:8px 5px!important;white-space:normal;word-break:break-word}
  #orderManager .btn{min-height:40px}
  .arvexa-product-card{padding:17px!important}
  .arvexa-product-card h4{font-size:18px!important;padding-right:70px!important}
  .arvexa-product-badge{right:11px!important;top:11px!important}
  .arvexa-card-bottom{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .arvexa-order-cta{margin:0!important}
  .arvexa-addon-bottom{flex-direction:column!important;align-items:stretch!important}
  .arvexa-addon-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%}
  .arvexa-addon-actions .btn{width:100%}
  footer .d-flex{flex-wrap:wrap!important;text-align:center;gap:4px}
  form input,form select,form textarea{font-size:16px!important}
}