/* Hostna Clarity 4.0.8 - light customer application layer. */
:root,
[data-bs-theme="light"] {
  --bs-body-color: #25324a;
  --bs-body-bg: #f5f7fb;
  --bs-primary: #3157d5;
  --bs-primary-rgb: 49, 87, 213;
  --bs-secondary-color: #65728a;
  --bs-border-color: #dbe2ee;
  --hostna-ink: #081126;
  --hostna-muted: #65728a;
  --hostna-blue: #3157d5;
  --hostna-violet: #7657e8;
  --hostna-cyan: #25a9cf;
  --hostna-green: #1f9668;
  --hostna-border: #dbe2ee;
  --hostna-surface: #ffffff;
  --hostna-surface-strong: #f5f7fb;
  --hostna-shadow: 0 24px 70px rgba(31, 47, 78, 0.1);
}

html {
  color-scheme: light !important;
  background: #f5f7fb !important;
}

body.hostna-billing {
  color: #25324a !important;
  background: #f5f7fb !important;
}

.hostna-billing :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, strong) { color: #081126; }
.hostna-billing :is(p, small, .text-secondary, .text-muted) { color: #65728a !important; }
.hostna-billing a { color: #3157d5; }

.hostna-billing-bar {
  color: #d7e1f2 !important;
  background: #081126 !important;
}

.hostna-billing-top {
  background: #fff !important;
  border: 1px solid #dbe2ee !important;
  border-top: 0 !important;
  box-shadow: 0 12px 34px rgba(31, 47, 78, 0.08) !important;
}
.hostna-billing-top .hostna-wordmark { color: #081126 !important; }
.hostna-billing .hostna-public-nav a,
.hostna-billing .hostna-shell-shortcuts a { color: #334158 !important; background: transparent !important; border-color: transparent !important; }
.hostna-public-nav a:hover,
.hostna-shell-shortcuts a:hover { color: #3157d5 !important; background: #edf2ff !important; }
.hostna-billing :is(.hostna-back-site, .hostna-shell-shortcuts a) { color: #334158 !important; background: #fff !important; border-color: #cbd5e5 !important; }
.hostna-shell-label { color: #3157d5 !important; background: #edf2ff !important; border-color: #d2dcf2 !important; }

.hostna-billing header {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: #dbe2ee !important;
  box-shadow: 0 10px 30px rgba(31, 47, 78, 0.07) !important;
}

.hostna-billing :is(.hostna-wordmark, .navbar-brand) { color: #081126 !important; }
.hostna-billing .hostna-wordmark::before,
.hostna-billing .navbar-brand::before {
  width: 27px !important;
  height: 31px !important;
  flex: 0 0 27px !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='31' viewBox='0 0 27 31'%3E%3Crect x='0' y='5' width='7' height='21' rx='3.5' fill='%2325a9cf'/%3E%3Crect x='10' y='0' width='7' height='31' rx='3.5' fill='%233157d5'/%3E%3Crect x='20' y='7.5' width='7' height='16' rx='3.5' fill='%237657e8'/%3E%3C/svg%3E") center / 27px 31px no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}
.hostna-billing .nav-link { color: #334158 !important; }
.hostna-billing .nav-link:is(:hover, .active) { color: #3157d5 !important; background: #edf2ff !important; }
.hostna-billing .dropdown-menu { color: #25324a !important; background: #fff !important; border-color: #dbe2ee !important; box-shadow: 0 18px 48px rgba(31, 47, 78, 0.12) !important; }
.hostna-billing .dropdown-item { color: #334158 !important; }
.hostna-billing .dropdown-item:hover { color: #3157d5 !important; background: #f1f4fa !important; }

.hostna-billing :is(.form-control, .form-select, .input-group-text, textarea) {
  min-height: 48px;
  color: #081126 !important;
  background: #fff !important;
  border-color: #cbd5e5 !important;
}
.hostna-billing :is(.form-control, textarea)::placeholder { color: #8793a8 !important; opacity: 1; }
.hostna-billing :is(.form-control, .form-select, textarea):focus {
  color: #081126 !important;
  background: #fff !important;
  border-color: #3157d5 !important;
  box-shadow: 0 0 0 4px rgba(49, 87, 213, 0.12) !important;
}

.hostna-billing .btn { border-radius: 10px; }
.hostna-billing .btn-primary {
  color: #fff !important;
  background: #3157d5 !important;
  border-color: #3157d5 !important;
  box-shadow: 0 12px 28px rgba(49, 87, 213, 0.2) !important;
}
.hostna-billing :is(.btn-light, .btn-dark, .btn-secondary, .btn-outline-secondary, .btn-outline-info) {
  color: #081126 !important;
  background: #fff !important;
  border-color: #cbd5e5 !important;
}

.hostna-billing :is(.card, .modal-content, #sidebarMenu) {
  color: #25324a !important;
  background: #fff !important;
  border-color: #dbe2ee !important;
  box-shadow: 0 16px 44px rgba(31, 47, 78, 0.07) !important;
}
.hostna-billing :is(.card-header, .card-footer, .modal-header, .modal-footer) {
  color: #081126 !important;
  background: #f7f9fd !important;
  border-color: #dbe2ee !important;
}
.hostna-billing .table { --bs-table-color: #25324a; --bs-table-bg: transparent; --bs-table-border-color: #dbe2ee; }
.hostna-billing .table thead th { color: #081126 !important; background: #f1f4fa !important; }
.hostna-billing .alert { color: #25324a !important; background: #fff !important; border: 1px solid #dbe2ee !important; }

/* Public authentication */
.hostna-billing--public .hostna-auth-wrap { padding: clamp(52px, 7vw, 92px) 24px clamp(64px, 9vw, 110px); }
.hostna-billing--public .hostna-auth-shell {
  max-width: 1240px;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid #dbe2ee !important;
  border-radius: 28px !important;
  box-shadow: 0 32px 90px rgba(31, 47, 78, 0.14) !important;
  backdrop-filter: none !important;
}
.hostna-billing--public .hostna-auth-story {
  color: #25324a !important;
  background: linear-gradient(145deg, #f7f9fd, #eaf0ff) !important;
  border-radius: 27px 0 0 27px !important;
}
.hostna-billing--public .hostna-auth-story::before,
.hostna-billing--public .hostna-auth-story::after { opacity: 0.38; }
.hostna-billing--public .hostna-auth-story h1 {
  color: #081126 !important;
  font-size: clamp(3rem, 5vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.065em;
}
.hostna-billing--public :is(.hostna-auth-eyebrow, .hostna-auth-card__heading > span) {
  color: #3157d5 !important;
}
.hostna-billing--public .hostna-auth-rail {
  color: #25324a !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: #dbe2ee !important;
}
.hostna-billing--public .hostna-auth-rail > div { border-color: #dbe2ee !important; }
.hostna-billing--public .hostna-auth-rail > div.is-active { background: #edf2ff !important; }
.hostna-billing--public .hostna-auth-rail :is(strong, b) { color: #081126 !important; }
.hostna-billing--public .hostna-auth-rail > div > span { color: #3157d5 !important; }
.hostna-billing--public .hostna-auth-rail small { color: #5d687c !important; }
.hostna-billing--public .hostna-auth-trust { color: #4e5c73 !important; }
.hostna-billing--public .hostna-auth-plan-link { color: #25324a !important; background: #fff !important; border-color: #dbe2ee !important; }
.hostna-billing--public .hostna-auth-card {
  color: #25324a !important;
  background: #fff !important;
  border-radius: 0 27px 27px 0 !important;
}
.hostna-billing--public .hostna-auth-card__heading h2 { color: #081126 !important; }
.hostna-billing--public .hostna-auth-card__status { color: #65728a !important; }
.hostna-billing--public .hostna-auth-card__status a { color: #3157d5 !important; }
.hostna-billing--public .hostna-auth-switch { color: #25324a !important; background: #f1f4fa !important; border-color: #dbe2ee !important; }
.hostna-billing--public .hostna-auth-note { color: #5d687c !important; }
.hostna-billing--public .hostna-auth-switch a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; color: #3157d5 !important; }
.hostna-billing--public .hostna-auth-submit { color: #fff !important; background: #3157d5 !important; }

/* Client workspace */
.hostna-client-experience .hostna-sidebar-col .offcanvas,
.hostna-client-experience .hostna-sidebar-col > div {
  background: #fff !important;
  border-color: #dbe2ee !important;
  box-shadow: 0 18px 54px rgba(31, 47, 78, 0.08) !important;
}
.hostna-client-experience .hostna-sidebar-brand { background: #edf2ff !important; border-color: #d2dcf2 !important; }
.hostna-billing :is(.hostna-control-hero, .hostna-control-guest, .hostna-service-console__hero, .hostna-order-hero) {
  color: #25324a !important;
  background: linear-gradient(145deg, #fff, #edf2ff) !important;
  border-color: #d2dcf2 !important;
  box-shadow: 0 22px 64px rgba(31, 47, 78, 0.1) !important;
}
.hostna-billing :is(.hostna-control-hero, .hostna-control-guest)::before,
.hostna-billing .hostna-order-hero::after { opacity: 0.2 !important; }
.hostna-billing :is(.hostna-control-hero h1, .hostna-control-guest h1, .hostna-service-console__hero h2, .hostna-order-hero h1) { color: #081126 !important; }
.hostna-control-eyebrow { color: #3157d5 !important; }
.hostna-billing :is(.hostna-control-health, .hostna-control-preview, .hostna-service-console__state) { color: #4e5c73 !important; background: #fff !important; border-color: #dbe2ee !important; backdrop-filter: none !important; }
.hostna-billing :is(.hostna-control-stat, .hostna-control-quick__grid > a, .hostna-control-panel, .hostna-control-capabilities__grid article, .hostna-service-console__grid article, .hostna-resource-usage, .hostna-resource-usage__grid article, .hostna-service-console__workspace, .hostna-service-details > div, .hostna-service-form, .hostna-control-entry) {
  color: #25324a !important;
  background: #fff !important;
  border-color: #dbe2ee !important;
  box-shadow: 0 14px 40px rgba(31, 47, 78, 0.07) !important;
  backdrop-filter: none !important;
}
.hostna-billing :is(.hostna-control-stat, .hostna-control-quick__grid > a, .hostna-control-list > a):hover { background: #f7f9fd !important; border-color: #aebbd1 !important; }
.hostna-control-stat__icon { color: #3157d5 !important; background: #edf2ff !important; box-shadow: none !important; }
.hostna-control-stat__icon--violet { color: #7657e8 !important; background: #f1edff !important; }
.hostna-control-stat__icon--amber { color: #a26513 !important; background: #fff4df !important; }
.hostna-control-stat__icon--green { color: #1f9668 !important; background: #e9f7f1 !important; }
.hostna-resource-usage__live { color: #176344 !important; background: #e9f7f1 !important; border-color: #bce4d3 !important; }
.hostna-resource-meter { background: #e7ecf4 !important; }
.hostna-resource-meter i { background: #3157d5 !important; box-shadow: none !important; }
.hostna-service-tip { color: #4e5c73 !important; background: #edf2ff !important; border-color: #d2dcf2 !important; }

/* Order flow */
.hostna-billing .hostna-order-progress { color: #65728a !important; background: #fff !important; border-color: #dbe2ee !important; }
.hostna-billing .hostna-order-progress b { color: #5d687c !important; }
.hostna-billing .hostna-order-progress .is-active { color: #fff !important; background: #3157d5 !important; border-color: #3157d5 !important; }
.hostna-billing .hostna-order-progress .is-active b { color: #fff !important; background: #3157d5 !important; }
.hostna-billing .hostna-order-surface { color: #25324a !important; background: #fff !important; border-color: #dbe2ee !important; box-shadow: 0 22px 64px rgba(31, 47, 78, 0.1) !important; }
.hostna-billing .hostna-order-surface > header { background: #fff !important; border-color: #dbe2ee !important; box-shadow: none !important; }
.hostna-billing .hostna-order-surface h2 { color: #081126 !important; }
.hostna-billing .hostna-order-surface :is(#orderbutton, #orderbutton > .card-body) { color: #25324a !important; background: transparent !important; }
.hostna-billing .hostna-order-surface :is(.accordion, .accordion-item) { color: #25324a !important; background: #fff !important; border-color: #dbe2ee !important; }
.hostna-billing .hostna-order-surface .accordion-button { color: #081126 !important; background: #f7f9fd !important; }
.hostna-billing .hostna-order-surface .accordion-button:not(.collapsed) { color: #fff !important; background: #3157d5 !important; }
.hostna-billing .hostna-order-surface .accordion-button:disabled { color: #5d687c !important; background: #f1f4fa !important; opacity: 1; }
.hostna-billing .hostna-order-surface .badge.bg-info { color: #fff !important; background: #3157d5 !important; }
.hostna-billing :is(footer, .footer) { color: #78859a !important; background: #fff !important; border-color: #dbe2ee !important; }

@media (max-width: 991.98px) {
  .hostna-billing--public .hostna-auth-story { border-radius: 27px 27px 0 0 !important; }
  .hostna-billing--public .hostna-auth-card { border-radius: 0 0 27px 27px !important; }
}

@media (max-width: 575.98px) {
  .hostna-billing--public .hostna-auth-wrap { padding: 28px 12px 64px; }
  .hostna-billing--public .hostna-auth-shell { border-radius: 20px !important; }
  .hostna-billing--public .hostna-auth-story { padding: 34px 24px; border-radius: 19px 19px 0 0 !important; }
  .hostna-billing--public .hostna-auth-story h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .hostna-billing--public .hostna-auth-card { padding: 34px 24px; border-radius: 0 0 19px 19px !important; }
  .hostna-billing-top { border-right: 0 !important; border-left: 0 !important; border-radius: 0 !important; }

  .hostna-billing .hostna-responsive-table-wrap {
    overflow: visible !important;
  }

  .hostna-billing .hostna-responsive-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    margin: 0;
    white-space: normal !important;
    border: 0 !important;
    background: transparent !important;
  }

  .hostna-billing .hostna-responsive-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .hostna-billing .hostna-responsive-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px 0 0;
  }

  .hostna-billing .hostna-responsive-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #dbe2ee;
    border-radius: 16px;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(31, 47, 78, 0.08);
  }

  .hostna-billing .hostna-responsive-table tbody td {
    display: block;
    min-width: 0;
    padding: 12px !important;
    color: #25324a !important;
    white-space: normal !important;
    text-align: left !important;
    overflow-wrap: anywhere;
    border: 0 !important;
    border-top: 1px solid #edf1f7 !important;
  }

  .hostna-billing .hostna-responsive-table tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: #65728a;
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.065em;
    text-transform: uppercase;
  }

  .hostna-billing .hostna-responsive-table .hostna-mobile-primary,
  .hostna-billing .hostna-responsive-table .hostna-mobile-actions,
  .hostna-billing .hostna-responsive-table .hostna-mobile-empty {
    grid-column: 1 / -1;
  }

  .hostna-billing .hostna-responsive-table .hostna-mobile-primary {
    padding: 15px !important;
    background: #f7f9fd !important;
    border-top: 0 !important;
  }

  .hostna-billing .hostna-responsive-table .hostna-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .hostna-billing .hostna-responsive-table .hostna-mobile-actions::before {
    margin-bottom: 0 !important;
  }

  .hostna-billing .hostna-responsive-table .hostna-mobile-actions .btn {
    min-width: 88px;
    min-height: 44px;
  }

  .hostna-billing .hostna-responsive-table .hostna-mobile-empty {
    padding: 28px 18px !important;
    text-align: center !important;
    border-top: 0 !important;
  }

  .hostna-billing .hostna-responsive-table .hostna-mobile-empty::before {
    content: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}