/* ====================================================================
   HostForY — UI bug fixes (loaded LAST, after custom.css + extras)
   Keep fixes small and targeted; one block per bug.
   ==================================================================== */

/* 1. Homepage hero buttons: global `a{color:accent!important}` repainted
      the primary button text green on green. */
.hf-portal a.hf-btn--primary,
.hf-portal a.hf-btn--primary:hover { color: var(--accent-fg, #062012) !important; }
.hf-portal a.hf-btn--ghost { color: var(--hf-fg-0) !important; }
.hf-portal a.hf-btn--ghost:hover { color: var(--hf-accent) !important; }

/* 2. Sidebar menus (Categories / Actions / account nav):
      every link was a separate bordered card with 0 left padding,
      so icons touched the border and the active row jumped. */
.panel-sidebar .list-group { padding: 6px !important; }
.panel-sidebar .list-group > .list-group-item,
.sidebar .panel-sidebar .list-group > .list-group-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 9px 12px !important;
  margin: 0 0 2px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--hf-fg-1) !important;
  line-height: 1.35 !important;
}
.panel-sidebar .list-group > .list-group-item:last-child { margin-bottom: 0 !important; }
.panel-sidebar .list-group > .list-group-item:hover {
  background: var(--hf-bg-2) !important;
  color: var(--hf-fg-0) !important;
}
.panel-sidebar .list-group > .list-group-item.active {
  background: color-mix(in oklab, var(--hf-accent) 12%, transparent) !important;
  color: var(--hf-fg-0) !important;
}
.panel-sidebar .list-group > .list-group-item > i,
.panel-sidebar .list-group > .list-group-item > .ls,
.panel-sidebar .list-group > .list-group-item > .lm {
  flex: 0 0 16px;
  width: 16px;
  margin: 0 !important;
  position: static !important;
  text-align: center;
  color: var(--hf-accent) !important;
}
.panel-sidebar .list-group > .list-group-item > .badge { margin-left: auto !important; }

/* 3. Inputs with a search icon (.search-field): custom.css forced
      padding 14px so the icon sat on top of the placeholder. */
.search-field { position: relative; }
.search-field > .form-control { padding-left: 44px !important; }
.search-field.search-field-lg > .form-control { padding-left: 48px !important; }
.search-field > .search-field-icon { pointer-events: none; z-index: 2; }

/* 4. Selectize multi-select (TLD categories etc.): outer wrapper got
      .form-control padding/border, inner box stayed white. */
.selectize-control.form-control {
  padding: 0 !important; border: 0 !important; background: transparent !important;
  height: auto !important; box-shadow: none !important;
}
.selectize-control .selectize-input {
  background: var(--hf-bg-0) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 8px !important;
  color: var(--hf-fg-0) !important;
  box-shadow: none !important;
  min-height: 44px;
  padding: 8px 32px 4px 10px !important;
}
.selectize-control .selectize-input.focus { border-color: var(--hf-accent) !important; }
.selectize-control .selectize-input > div,
.selectize-control.multi .selectize-input > div {
  background: var(--hf-bg-2) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
  border-radius: 6px !important;
}
.selectize-control .selectize-input > input,
.selectize-control .selectize-input input[type="text"] {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  height: 24px !important;
  box-shadow: none !important;
  color: var(--hf-fg-0) !important;
}
.selectize-dropdown, .selectize-dropdown.form-control {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-1) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  height: auto !important;
}
.selectize-dropdown .option, .selectize-dropdown .optgroup-header { color: var(--hf-fg-1) !important; background: transparent !important; }
.selectize-dropdown .active, .selectize-dropdown .option:hover { background: var(--hf-bg-2) !important; color: var(--hf-fg-0) !important; }

/* 5. Small selects (DataTables "Show N entries", -sm selects):
      14px padding on a 30px-high control clipped the value;
      the shorthand background also removed the dropdown arrow. */
select.form-control-sm, select.custom-select-sm,
.dataTables_length select {
  height: 34px !important;
  min-width: 72px;
  padding: 4px 30px 4px 10px !important;
  line-height: 1.4 !important;
  font-size: 13px !important;
}
select.form-control, select.custom-select, select.form-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%237d8893' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 6px !important;
  padding-right: 32px !important;
}
select[multiple].form-control, select[size].form-control { background-image: none !important; padding-right: 14px !important; }

/* 6. Domain promo boxes ("Add Web Hosting" / "Transfer your domain")
      were white cards with near-white titles. */
.domain-promo-box, .promo-box, .promo-banner:not(.promo-banner-dark) {
  background: var(--hf-bg-1) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.domain-promo-box h3, .domain-promo-box h4, .domain-promo-box h5,
.promo-box h3, .promo-box h4, .promo-box h5 { color: var(--hf-fg-0) !important; }
.domain-promo-box p, .promo-box p { color: var(--hf-fg-2) !important; }
.domain-promo-box p.text-primary { color: var(--hf-accent) !important; }

/* 7. Notification dot next to the bell rendered as an empty grey pill. */
.badge.badge-dot, .nav-badge.badge-dot {
  width: 8px !important; height: 8px !important; min-width: 0 !important;
  padding: 0 !important; border: 0 !important; font-size: 0 !important;
  line-height: 0 !important; border-radius: 50% !important;
  background: var(--hf-accent) !important;
  box-shadow: 0 0 0 2px var(--hf-bg-0) !important;
}
.dataTables_wrapper .dataTables_length select.form-control,
.dataTables_wrapper select.form-control-sm {
  background-color: var(--hf-bg-0) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%237d8893' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
}

/* 8. Lagom ships light-theme CSS variables (#fff panels, #17191c text).
      Anything not already overridden fell back to them (e.g. the invoice
      'View: All Entries' filter was near-black on dark). Remap to dark tokens. */
:root {
  --pagination-hover-color: var(--hf-fg-0);
  --btn-default-color: var(--hf-fg-0);
  --popover-body-color: var(--hf-fg-0);
  --input-btn-focus-color: var(--hf-fg-0);
  --list-group-item-heading-color: var(--hf-fg-0);
  --site-section-secondary-title-color: var(--hf-fg-0);
  --panel-title-color: var(--hf-fg-0);
  --main-footer-extended-title-color: var(--hf-fg-0);
  --site-section-secondary-desc-color: var(--hf-fg-0);
  --input-focus-color: var(--hf-fg-0);
  --blockquote-font-color: var(--hf-fg-0);
  --list-group-action-active-color: var(--hf-fg-0);
  --card-cap-color: var(--hf-fg-0);
  --dropdown-link-color: var(--hf-fg-0);
  --panel-default-text: var(--hf-fg-0);
  --app-nav-top-menu-link-color: var(--hf-fg-0);
  --app-nav-left-link-color: var(--hf-fg-0);
  --pagination-color: var(--hf-fg-0);
  --input-color: var(--hf-fg-0);
  --panel-home-domain-title-color: var(--hf-fg-0);
  --tile-title-color: var(--hf-fg-0);
  --input-hover-color: var(--hf-fg-0);
  --login-title-color: var(--hf-fg-0);
  --table-td-font-color: var(--hf-fg-0);
  --input-disabled-color: var(--hf-fg-0);
  --ca-section-title-color: var(--hf-fg-0);
  --site-section-title-color: var(--hf-fg-0);
  --price-color: var(--hf-fg-0);
  --legend-color: var(--hf-fg-0);
  --app-nav-left-wide-dropdown-link-color: var(--hf-fg-0);
  --nav-link-color: var(--hf-fg-0);
  --btn-default-hover-color: var(--hf-fg-0);
  --main-footer-extended-desc-color: var(--hf-fg-0);
  --ui-nav-link-color: var(--hf-fg-0);
  --btn-social-google-color: var(--hf-fg-0);
  --app-nav-left-wide-link-color: var(--hf-fg-0);
  --text-heading-color: var(--hf-fg-0);
  --main-header-title-color: var(--hf-fg-0);
  --app-nav-top-bg: var(--hf-bg-0);
  --input-focus-bg: var(--hf-bg-0);
  --feature-boxed-bg: var(--hf-bg-1);
  --jumbotron-bg: var(--hf-bg-1);
  --main-top-bg: var(--hf-bg-0);
  --panel-active-bg: var(--hf-bg-2);
  --list-group-item-link-hover-bg: var(--hf-bg-2);
  --table-container-bg: var(--hf-bg-1);
  --blockquote-bg: var(--hf-bg-1);
  --app-nav-left-link-active-bg: var(--hf-bg-2);
  --panel-home-domain-bg: var(--hf-bg-1);
  --tile-bg: var(--hf-bg-1);
  --ui-block-link-hover-bg: var(--hf-bg-2);
  --mob-app-nav-bg: var(--hf-bg-0);
  --mob-app-nav-header-bg: var(--hf-bg-0);
  --app-nav-left-wide-dropdown-link-active-bg: var(--hf-bg-2);
  --dropdown-divider-bg: var(--hf-bg-1);
  --loader-light-bg: var(--hf-bg-1);
  --main-footer-bg: var(--hf-bg-0);
  --tile-bg-color: var(--hf-bg-1);
  --ui-block-bg-form: var(--hf-bg-1);
  --well-bg: var(--hf-bg-1);
  --panel-default-bg: var(--hf-bg-1);
  --popover-title-bg: var(--hf-bg-1);
  --main-body-sidebar-content-bg: var(--hf-bg-0);
  --breadcrumb-bg: var(--hf-bg-1);
  --btn-default-hover-bg: var(--hf-bg-2);
  --ui-block-link-active-bg: var(--hf-bg-2);
  --list-group-item-link-disabled-bg: var(--hf-bg-1);
  --pre-bg: var(--hf-bg-1);
  --list-group-active-bg: var(--hf-bg-2);
  --pagination-hover-bg: var(--hf-bg-2);
  --app-nav-left-wide-link-active-bg: var(--hf-bg-2);
  --nav-pills-active-link-hover-bg: var(--hf-bg-2);
  --ui-nav-link-active-bg: var(--hf-bg-2);
  --panel-bg: var(--hf-bg-1);
  --dropdown-bg: var(--hf-bg-1);
  --icheck-hover-bg: var(--hf-bg-2);
  --icheck-bg: var(--hf-bg-1);
  --body-bg: var(--hf-bg-0);
  --table-bg-hover: var(--hf-bg-2);
  --tooltip-bg: var(--hf-bg-1);
  --list-group-bg: var(--hf-bg-1);
  --input-hover-bg: var(--hf-bg-0);
  --btn-disabled-bg: var(--hf-bg-1);
  --input-disabled-bg: var(--hf-bg-0);
  --ui-block-overlay-bg-2: var(--hf-bg-1);
  --popover-bg: var(--hf-bg-1);
  --table-bg-active: var(--hf-bg-2);
  --btn-social-google-bg: var(--hf-bg-1);
  --list-group-item-disabled-bg: var(--hf-bg-1);
  --package-bg: var(--hf-bg-1);
  --input-group-addon-bg: var(--hf-bg-0);
  --app-nav-left-bg: var(--hf-bg-1);
  --code-bg: var(--hf-bg-1);
  --table-bg-accent: var(--hf-bg-1);
  --card-bg: var(--hf-bg-1);
  --input-bg: var(--hf-bg-0);
  --tile-hover-bg: var(--hf-bg-2);
  --thumbnail-bg: var(--hf-bg-1);
  --dropdown-link-active-bg: var(--hf-bg-2);
  --modal-content-bg: var(--hf-bg-1);
  --panel-hover-bg: var(--hf-bg-2);
  --panel-sidebar-list-group-bg: var(--hf-bg-1);
  --panel-sidebar-link-active-bg: var(--hf-bg-2);
  --login-bg: var(--hf-bg-0);
  --list-group-item-link-active-bg: var(--hf-bg-2);
  --app-nav-navbar-bg: var(--hf-bg-0);
  --ui-block-bg: var(--hf-bg-1);
  --pagination-disabled-bg: var(--hf-bg-1);
  --btn-social-google-hover-bg: var(--hf-bg-2);
  --select-option-bg: var(--hf-bg-1);
  --panel-border-divider-color: var(--hf-line);
  --icheck-border-color: var(--hf-line);
  --list-group-item-link-active-border: var(--hf-line);
  --legend-border-color: var(--hf-line);
  --nav-tabs-border-color: var(--hf-line);
  --list-group-item-border-color: var(--hf-line);
  --ui-block-divider-color: var(--hf-line);
  --pagination-border: var(--hf-line);
  --popover-border-color: var(--hf-line);
  --list-group-active-border: var(--hf-line);
  --table-border-color: var(--hf-line);
  --nav-tabs-link-hover-border-color: var(--hf-line);
  --thumbnail-border-colo: var(--hf-line);
  --input-disabled-border-color: var(--hf-line);
  --btn-default-border: var(--hf-line);
  --hr-border: var(--hf-line);
  --input-border-color: var(--hf-line);
  --modal-header-border-color: var(--hf-line);
  --btn-social-google-border-color: var(--hf-line);
  --thumbnail-border: var(--hf-line);
  --panel-default-border: var(--hf-line);
  --blockquote-border-color: var(--hf-line);
  --modal-footer-border-color: var(--hf-line);
  --site-section-border-color: var(--hf-line);
  --nav-divider-color: var(--hf-line);
}

/* 9. Filter dropdown label ("View: All Entries") inherited #17191c. */
.view-filter-btns .dropdown-toggle,
.view-filter-btns .dropdown-toggle .filter-name {
  color: var(--hf-fg-0) !important;
}

/* 10. Homepage "live status" pill showed two dots (global ::before dot + own dot). */
.hf-portal .hf-status-dot::before { display: none !important; }

/* 11. Footer: bright #e9eaec divider line across the whole page. */
.footer-bottom, .main-footer .footer-bottom { border-top-color: var(--hf-line) !important; }
.main-footer { border-top-color: transparent !important; }

/* 12. Panel footers (View Credit History / New Contact...): buttons were glued
       to the panel's left edge and bottom corner. */
.panel:not(.panel-summary) > .panel-footer {
  padding: 12px 16px 16px !important;
  border-top: 1px solid var(--hf-line) !important;
  background: transparent !important;
}
.panel > .panel-footer .btn-block { width: 100% !important; justify-content: center; }

/* 13. List groups inside regular panels (dashboard "Active Products",
       "Recent Support Tickets", etc.) rendered as a card inside a card. */
.panel:not(.panel-sidebar) > .list-group,
.panel:not(.panel-sidebar) > .list-group-lg { margin: 0 !important; }
.panel:not(.panel-sidebar) > .list-group > .list-group-item,
.panel:not(.panel-sidebar) > .list-group-lg > .list-group-item {
  border: 0 !important;
  border-top: 1px solid var(--hf-line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.panel:not(.panel-sidebar) > .list-group > .list-group-item:first-child { border-top: 0 !important; }
.panel:not(.panel-sidebar) > .list-group > a.list-group-item:hover { background: var(--hf-bg-2) !important; }
.panel:not(.panel-sidebar) > .list-group > .list-group-item:last-child { border-radius: 0 0 12px 12px !important; }

/* 14. Dashboard "Register a New Domain": Transfer / Register buttons touched. */
#registerDomainPanel .input-group-btn { gap: 10px; }
#registerDomainPanel .input-group-btn .btn { flex: 1 1 0; margin: 0 !important; border-radius: 8px !important; }
#registerDomainPanel .input-group-btn .btn-default {
  background: transparent !important;
  border: 1px solid var(--hf-line) !important;
  color: var(--hf-fg-0) !important;
}
#registerDomainPanel .input-group-btn .btn-default:hover { background: var(--hf-bg-2) !important; }

/* 15. Invoices sidebar "unpaid balance" summary panel overflowed the column. */
.sidebar .panel { box-sizing: border-box !important; max-width: 100%; }

/* 16. Elements hidden by JS (inline display:none) were forced visible by
       broad `display:flex !important` rules — e.g. every billing cycle
       (Monthly…Triennially) listed empty in the checkout summary. */
[style*="display: none"], [style*="display:none"] { display: none !important; }
ul.summary-list > li[style*="display: none"], ul.summary-list > li[style*="display:none"],
.summary-list .list-item[style*="display: none"], .summary-list .list-item[style*="display:none"] { display: none !important; }

/* 17. Footer: copyright had its own top border crossing under the
       language switcher; align the bottom row. */
.footer-bottom > .container { align-items: center !important; }
.footer-bottom .footer-copyright {
  border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important;
}

/* 18. Store category page: the category title + tagline were rendered twice. */
.page-products .cart-body > .header-lined { display: none !important; }

/* 19. Store product cards: descriptions were clipped at 126px under a fade,
       hiding lines like "Unmetered traffic, free L3-L7 DDoS". */
.page-products .product .product-desc { max-height: none !important; overflow: visible !important; }
.page-products .product .product-desc::after { display: none !important; }

/* 20. Configure-product order summary: three nested padded boxes squeezed
       the lines so prices wrapped under their labels; total was tiny/grey. */
.order-summary .summary-container {
  padding: 0 !important; border: 0 !important; background: transparent !important;
}
.order-summary .summary-container .clearfix {
  display: flex !important; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.order-summary .summary-container .clearfix::before,
.order-summary .summary-container .clearfix::after { display: none !important; }
.order-summary .summary-container .clearfix > .pull-left { float: none !important; flex: 1 1 auto; min-width: 0; }
.order-summary .summary-container .clearfix > .pull-right { float: none !important; flex: 0 0 auto; white-space: nowrap; }
.order-summary .total-due-today {
  display: flex !important; flex-direction: column; align-items: flex-end; gap: 2px;
}
.order-summary .total-due-today .amt {
  order: 2;
  font-family: var(--hf-mono) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--hf-fg-0) !important;
}
.order-summary .total-due-today > span:not(.amt) { order: 1; font-size: 12px !important; color: var(--hf-fg-2) !important; }
#btnCompleteProductConfig { gap: 8px; width: 100%; justify-content: center; }

/* 21. Checkout summary: -23px right margin pushed amounts past the panel edge. */
.order-summary .summary-content { margin-right: 0 !important; }

/* 22. Range sliders (Additional IPv4 etc.) used the light sprite skin. */
.irs-line, .irs-line-left, .irs-line-mid, .irs-line-right {
  background: var(--hf-bg-3) !important; border-color: var(--hf-line) !important;
}
.irs-line { border-radius: 4px; overflow: hidden; }
.irs-bar, .irs-bar-edge { background: var(--hf-accent) !important; border-color: var(--hf-accent) !important; }
.irs-min, .irs-max { background: var(--hf-bg-2) !important; color: var(--hf-fg-2) !important; }
.irs-grid-text { color: var(--hf-fg-3) !important; }
.irs-grid-pol { background: var(--hf-line) !important; }
/* 16b. …and the "Totals" caption when every recurring row is hidden. */
ul.summary-list#recurring:not(:has(> li:not(.faded):not([style*="display: none"]):not([style*="display:none"]))) { display: none !important; }

/* 23. Summary panels (invoice "Total Due", sidebar balance) had a hard
       min-width of 320px inside a 280px column and stuck out to the right;
       the payment footer overlapped the amount with a stray divider. */
html body div.panel.panel-summary { min-width: 0 !important; width: auto !important; max-width: 100% !important; }
.panel.panel-summary > .panel-footer {
  margin-top: 16px !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid var(--hf-line) !important;
  background: transparent !important;
}
.panel.panel-summary > .panel-footer::after { display: none !important; }

/* 24. Store cards in one row now have equal height, so prices and
       "Order Now" buttons line up. */
.page-products .row-eq-height > [class*=col-] { display: flex !important; flex-direction: column !important; }
.page-products .row-eq-height > [class*=col-] > .product { flex: 1 1 auto !important; }