/*
 * XMLA experience layer for WHMCS/Croster customer-visible pages.
 * Loaded after Croster generated styles so it can be updated without touching vendor CSS.
 */
:root {
  --xmla-ink: #050a16;
  --xmla-midnight: #07101f;
  --xmla-deep: #091525;
  --xmla-surface: rgba(12, 24, 42, .72);
  --xmla-surface-strong: rgba(16, 31, 52, .86);
  --xmla-card: rgba(255, 255, 255, .075);
  --xmla-card-hover: rgba(255, 255, 255, .115);
  --xmla-line: rgba(255, 255, 255, .15);
  --xmla-line-strong: rgba(122, 215, 255, .45);
  --xmla-blue: #3498f7;
  --xmla-cyan: #7ad7ff;
  --xmla-green: #20d190;
  --xmla-gold: #d59118;
  --xmla-text: #ffffff;
  --xmla-soft: rgba(255, 255, 255, .74);
  --xmla-dim: rgba(255, 255, 255, .56);
  --xmla-radius: 8px;
  --xmla-shadow: 0 28px 78px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .12);
  --xmla-shadow-soft: 0 18px 48px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
}

html,
body,
body.dark-mode,
body.left-layout,
.primary-content,
.main-body,
#main-body,
.main-content,
.clientarea,
.clientareahome,
.loginpage-with-sidebar,
.center-container {
  background:
    radial-gradient(880px 520px at 8% -6%, rgba(52, 152, 247, .28), transparent 60%),
    radial-gradient(760px 470px at 96% 8%, rgba(32, 209, 144, .16), transparent 58%),
    radial-gradient(640px 460px at 54% 38%, rgba(139, 116, 255, .12), transparent 62%),
    linear-gradient(180deg, var(--xmla-ink) 0%, var(--xmla-midnight) 48%, var(--xmla-deep) 100%) !important;
  color: var(--xmla-text) !important;
  letter-spacing: 0 !important;
}

body,
button,
input,
select,
textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.fw-900,
.sec-title,
.section-title,
.panel-title,
.card-title,
.login-box h1,
.cros-pricing-table h4,
#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3 {
  color: var(--xmla-text) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

p,
small,
.text-muted,
.help-block,
.field-help-text,
.breadcrumb,
.breadcrumb a,
.card-body,
.panel-body,
.list-group-item,
.form-text,
.table,
.dataTables_info,
.client-home-panels,
.login-box p,
.sec-subtitle,
.product-desc,
.tagline {
  color: var(--xmla-soft) !important;
}

a,
.link,
.menu-title,
.breadcrumb a:hover {
  color: var(--xmla-cyan);
}

.sideMenu,
.sidebar-container,
.pre-header,
.navbar,
.header,
.topbar,
.main-header,
.tm-navbar,
.dropdown-menu,
.navbar-collapse,
.mobile-menu,
.modal-content {
  background: linear-gradient(145deg, rgba(8, 18, 32, .94), rgba(9, 20, 36, .78)) !important;
  border-color: var(--xmla-line) !important;
  box-shadow: var(--xmla-shadow-soft);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.sideMenu .logo img,
.login-header img,
.navbar-brand img {
  filter: drop-shadow(0 14px 30px rgba(52, 152, 247, .28));
}

.Primary_Navbar-Services > a,
.sideMenu .nav > li > a,
.nav-sidebar > li > a,
.navbar-nav > li > a,
.dropdown-menu a,
.menu-small-box,
.menu-small-box a {
  color: rgba(255, 255, 255, .84) !important;
  border-radius: var(--xmla-radius);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.sideMenu .nav > li > a:hover,
.sideMenu .nav > li.active > a,
.navbar-nav > li > a:hover,
.dropdown-menu a:hover,
.menu-small-box:hover,
.list-group-item:hover,
.list-group-item.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(52, 152, 247, .2), rgba(32, 209, 144, .12)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 34px rgba(52, 152, 247, .14);
}

.panel,
.card,
.well,
.login-box,
.TM-card,
.dashboard-panel,
.domain-pricing-box,
.product,
.product-box,
.order-box,
.sidebar .panel,
.panel-sidebar,
.tile,
.tiles .tile,
.home-shortcuts .shortcut,
.client-home-panels .panel,
.client-area-home .card,
.ticket-departments a,
.announcement-single,
.knowledgebase-cat,
.kb-article-item,
.table-container,
.dataTables_wrapper,
.invoice-container,
.quote-container,
#order-standard_cart .cros-pricing-table,
#order-standard_cart .product,
#order-standard_cart .products .card,
#order-standard_cart .view-cart-items,
#order-standard_cart .order-summary,
#order-standard_cart .sub-heading,
#order-standard_cart .summary-container,
#order-standard_cart .cart-body,
#order-standard_cart .cart-sidebar {
  background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045)), var(--xmla-surface) !important;
  border: 1px solid var(--xmla-line) !important;
  border-radius: var(--xmla-radius) !important;
  box-shadow: var(--xmla-shadow-soft) !important;
  color: var(--xmla-soft) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.panel:hover,
.card:hover,
.home-shortcuts .shortcut:hover,
.ticket-departments a:hover,
#order-standard_cart .cros-pricing-table:hover,
#order-standard_cart .product:hover {
  transform: translateY(-4px);
  border-color: var(--xmla-line-strong) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .065)), var(--xmla-surface-strong) !important;
  box-shadow: 0 30px 82px rgba(52, 152, 247, .2), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.panel-heading,
.card-header,
.modal-header,
.modal-footer,
.panel-footer,
.card-footer {
  background: rgba(255, 255, 255, .045) !important;
  border-color: var(--xmla-line) !important;
  color: var(--xmla-text) !important;
}

.panel-body,
.card-body,
.modal-body,
.login-box,
.main-content .panel:not(.dropdown-megamenu),
.main-content .card,
.main-content .well,
#order-standard_cart .cros-pricing-table,
#order-standard_cart .cart-sidebar,
#order-standard_cart .order-summary {
  padding: clamp(26px, 2.2vw, 38px) !important;
}

.btn,
button,
input[type="submit"],
.btn-primary,
.btn-default,
.btn-secondary,
.btn-outline,
.btn-success,
.btn-info,
#order-standard_cart .btn,
#order-standard_cart button {
  position: relative;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-primary,
.btn-success,
.main-content .btn-primary,
button.btn-primary,
input[type="submit"],
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success {
  background: linear-gradient(135deg, var(--xmla-blue), var(--xmla-green)) !important;
  border-color: rgba(122, 215, 255, .6) !important;
}

.btn-default,
.btn-secondary,
.btn-outline,
#order-standard_cart .btn-default,
#order-standard_cart .btn-secondary {
  background: rgba(255, 255, 255, .08) !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
#order-standard_cart .btn:hover {
  transform: translateY(-2px);
  border-color: rgba(122, 215, 255, .7) !important;
  box-shadow: 0 24px 58px rgba(52, 152, 247, .28), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  filter: saturate(1.08);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
select,
textarea,
.custom-select,
.select2-container .select2-selection,
.chosen-container-single .chosen-single {
  min-height: 54px;
  color: #fff !important;
  background: rgba(255, 255, 255, .075) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: var(--xmla-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus,
.select2-container--open .select2-selection {
  border-color: rgba(122, 215, 255, .68) !important;
  box-shadow: 0 0 0 3px rgba(52, 152, 247, .18), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  outline: none !important;
}

select option,
.select2-dropdown,
.select2-results__option,
.chosen-drop,
.chosen-results li {
  background: #101c2d !important;
  color: #fff !important;
}

label,
.control-label,
.form-check-label,
.custom-control-label,
th,
.table th,
.dataTables_wrapper label {
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 800 !important;
}

.table,
table,
.dataTable {
  background: transparent !important;
  color: var(--xmla-soft) !important;
}

.table th,
.table td,
table th,
table td,
.dataTable th,
.dataTable td {
  border-color: rgba(255, 255, 255, .1) !important;
}

.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover,
.dataTable tbody tr:hover {
  background: rgba(255, 255, 255, .055) !important;
  color: #fff !important;
}

.alert,
.markdown-editor-status,
.providerLinkingMsg,
.validation-container,
.domain-checker-result-headline,
.domain-available {
  border-radius: var(--xmla-radius) !important;
  border: 1px solid rgba(122, 215, 255, .2) !important;
  background: linear-gradient(145deg, rgba(52, 152, 247, .16), rgba(255, 255, 255, .045)) !important;
  color: #fff !important;
  box-shadow: var(--xmla-shadow-soft);
}

.badge,
.label,
.status,
.label-success,
.badge-success,
.badge-primary,
.client-home-panels .badge {
  border-radius: 999px !important;
  background: rgba(52, 152, 247, .9) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

.price,
.pricing,
.amount,
.total-due-today,
.invoice-total,
#order-standard_cart .price,
#order-standard_cart .total-due-today,
#order-standard_cart .product-price,
#order-standard_cart .summary-totals {
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 0 12px 38px rgba(52, 152, 247, .22);
}

#order-standard_cart,
#order-standard_cart .main-content,
#order-standard_cart .sidebar,
#order-standard_cart .products {
  color: var(--xmla-soft) !important;
}

#order-standard_cart .cros-pricing-table.active,
#order-standard_cart .cros-pricing-table.featured,
#order-standard_cart .product.active,
#order-standard_cart .product.featured {
  border-color: rgba(32, 209, 144, .55) !important;
  box-shadow: 0 32px 86px rgba(32, 209, 144, .14), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

#order-standard_cart .list-features li,
#order-standard_cart .product-features li,
.includes-features li {
  color: rgba(255, 255, 255, .74) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

.domain-search,
.domain-checker-container,
.landing-page,
.hero,
.section,
.homepage-section,
.store-promoted-product,
.mc-promo,
.clientarea-home-summary {
  background: transparent !important;
}

.domain-search .input-group,
.domain-checker-container .input-group,
.home-domain-search,
.search-box {
  background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045)), rgba(9, 20, 36, .74) !important;
  border: 1px solid var(--xmla-line) !important;
  border-radius: var(--xmla-radius) !important;
  box-shadow: var(--xmla-shadow-soft);
  padding: 10px !important;
}

.loginpage-with-sidebar .sidebar-container,
.loginpage-with-sidebar .center-container {
  background:
    radial-gradient(560px 360px at 18% 12%, rgba(52, 152, 247, .26), transparent 60%),
    linear-gradient(180deg, rgba(5, 10, 22, .98), rgba(7, 16, 31, .98)) !important;
}

.login-box {
  max-width: 520px;
  margin-inline: auto;
}

.login-box .social-signin-btns .btn,
.providerPreLinking .btn {
  background: rgba(255, 255, 255, .08) !important;
}

.ticket-departments a {
  display: block;
  min-height: 160px;
  text-decoration: none !important;
}

.ticket-departments a .name,
.ticket-departments a h5 {
  color: #fff !important;
}

.breadcrumb {
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 10px 14px;
}

.modal-backdrop.show {
  opacity: .76 !important;
}

/* Final XMLA polish for Croster-specific customer-facing components. */
.primary-content.loginpage-with-sidebar .login-container .login-box,
.primary-content.loginpage-with-sidebar .center-container .login-box,
.loginpage-with-sidebar .login-box,
body .login-box {
  background-color: rgba(9, 20, 36, .88) !important;
  background-image:
    linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .045) 48%, rgba(52, 152, 247, .08)),
    radial-gradient(520px 260px at 12% 0%, rgba(122, 215, 255, .18), transparent 62%) !important;
  border: 1px solid rgba(122, 215, 255, .24) !important;
  box-shadow: 0 34px 92px rgba(0, 0, 0, .46), 0 0 54px rgba(52, 152, 247, .11), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.loginpage-with-sidebar .login-box:hover {
  transform: translateY(-3px);
  border-color: rgba(122, 215, 255, .5) !important;
  box-shadow: 0 42px 112px rgba(0, 0, 0, .5), 0 0 72px rgba(52, 152, 247, .18), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

.loginpage-with-sidebar .sidebar-container.light,
.loginpage-with-sidebar .sidebar-container,
.loginpage-with-sidebar .center-container {
  color: rgba(255, 255, 255, .82) !important;
}

.loginpage-with-sidebar .sidebar-container p,
.loginpage-with-sidebar .sidebar-container li,
.loginpage-with-sidebar .sidebar-container .sec-subtitle,
.loginpage-with-sidebar .sidebar-container .tagline {
  color: rgba(255, 255, 255, .72) !important;
}

.feature-item,
.testimonial-item,
.cros-pricing-table,
.pricing-table,
.pricing-box,
.product-item,
.product-container,
.product-plan,
.feature-content,
.testimonial-massage {
  position: relative;
  background-color: rgba(9, 20, 36, .74) !important;
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, .115), rgba(255, 255, 255, .04)),
    radial-gradient(420px 240px at 10% 0%, rgba(52, 152, 247, .16), transparent 62%) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: var(--xmla-radius) !important;
  box-shadow: var(--xmla-shadow-soft) !important;
  color: var(--xmla-soft) !important;
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
}

.feature-item,
.testimonial-item,
.cros-pricing-table,
.pricing-table,
.pricing-box {
  padding: clamp(24px, 2vw, 34px) !important;
}

.feature-content,
.testimonial-massage {
  min-height: 100%;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible;
}

.feature-item::before,
.testimonial-item::before,
.cros-pricing-table::before,
.pricing-table::before,
.pricing-box::before,
.product-item::before,
.product-container::before,
.product-plan::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .16) 42%, transparent 74%),
    radial-gradient(180px 120px at 82% 18%, rgba(32, 209, 144, .18), transparent 70%);
  opacity: .42;
}

.feature-item:hover,
.testimonial-item:hover,
.cros-pricing-table:hover,
.pricing-table:hover,
.pricing-box:hover,
.product-item:hover,
.product-container:hover,
.product-plan:hover {
  transform: translateY(-6px);
  border-color: rgba(122, 215, 255, .5) !important;
  background-color: rgba(12, 27, 48, .9) !important;
  box-shadow: 0 34px 92px rgba(52, 152, 247, .2), 0 0 52px rgba(32, 209, 144, .11), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

.feature-title,
.testimonial-item .client-name,
.testimonial-item .author,
.testimonial-item strong {
  position: relative;
  color: #fff !important;
  font-weight: 900 !important;
}

.feature-desc,
.feature-desc p,
.testimonial-massage,
.testimonial-item,
.testimonial-item a {
  position: relative;
  color: rgba(255, 255, 255, .74) !important;
}

.testimonial-item .quote,
.feature-item i,
.feature-item svg {
  position: relative;
  color: var(--xmla-cyan) !important;
  text-shadow: 0 12px 38px rgba(52, 152, 247, .28);
}

body .testimonial-item,
body .cros-pricing-table,
body .cros-pricing-table.light,
body.dark-mode .cros-pricing-table.white,
body.dark-mode .cros-pricing-container .cros-pricing-table.white,
body .pricing-table,
body .pricing-box {
  background-color: rgba(9, 20, 36, .78) !important;
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .045)),
    radial-gradient(420px 240px at 10% 0%, rgba(52, 152, 247, .17), transparent 62%) !important;
  border-color: rgba(255, 255, 255, .15) !important;
  color: rgba(255, 255, 255, .76) !important;
}

body .cros-pricing-table.active,
body .cros-pricing-table.featured {
  border-color: rgba(32, 209, 144, .58) !important;
  box-shadow: 0 34px 92px rgba(32, 209, 144, .15), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

.cros-pricing-table .cost,
#order-standard_cart .cros-pricing-table .cost {
  display: inline-block;
  max-width: 100%;
  font-size: 30px !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.cros-pricing-table .cycle,
#order-standard_cart .cros-pricing-table .cycle {
  display: block;
  margin-top: 8px;
}

@media (max-width: 991px) {
  .sideMenu,
  .sidebar-container,
  .navbar-collapse {
    border-radius: 0 !important;
  }

  .main-content,
  .primary-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 640px) {
  h1, .h1, .sec-title {
    font-size: clamp(32px, 11vw, 48px) !important;
    line-height: 1 !important;
  }

	  .panel,
	  .card,
	  .well,
	  .login-box,
	  .TM-card,
	  .feature-item,
	  .testimonial-item,
	  .dashboard-panel,
	  .sidebar .panel,
	  #order-standard_cart .cros-pricing-table,
  #order-standard_cart .order-summary,
  .panel-body,
  .card-body,
  .modal-body {
    padding: 22px !important;
  }

  .btn,
  button,
  input[type="submit"],
  #order-standard_cart .btn {
    width: 100%;
    white-space: normal;
  }
}