/*! Noble VPS Lagom theme - glacier (dark) - built 2026-09-17 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/*!
 * Noble VPS Lagom - palette tokens: glacier (dark)
 */
:root {
  --nv-bg: #09090b;
  --nv-surface: #18181b;
  --nv-fg: #fafafa;
  --nv-muted: #a1a1aa;
  --nv-accent: #fafafa;
  --nv-accent-hover: #e4e4e7;
  --nv-accent-contrast: #09090b;
  --nv-border: #27272a;
  --nv-hero: #121214;
  --nv-elevated: #18181b;
  --nv-elevated-top: #27272a;
  --nv-elevated-bottom: #18181b;
  --nv-elevated-border: #27272a;
  --nv-elevated-border-top: #27272a;
  --nv-ribbon-bg: #fafafa;
  --nv-ribbon-fg: #09090b;
  --nv-featured-border: #27272a;
  --nv-checkbox-border: #27272a;
  --nv-checkbox-hover-bg: #121214;
  --nv-danger: #dc2626;
  --nv-danger-bg: rgba(220, 38, 38, 0.16);
  --nv-danger-border: rgba(220, 38, 38, 0.4);
  --nv-danger-text: #fecaca;
  --nv-danger-hover: #b91c1c;
  --nv-info: #38bdf8;
  --nv-info-bg: rgba(56, 189, 248, 0.12);
  --nv-info-border: rgba(56, 189, 248, 0.32);
  --nv-info-text: #7dd3fc;
  --nv-overlay-6: rgba(255, 255, 255, 0.06);
  --nv-overlay-8: rgba(255, 255, 255, 0.08);
  --nv-overlay-10: rgba(255, 255, 255, 0.1);
  --nv-overlay-12: rgba(255, 255, 255, 0.12);
  --nv-overlay-14: rgba(255, 255, 255, 0.14);
  --nv-overlay-22: rgba(255, 255, 255, 0.22);
  --nv-selection-bg: rgba(255, 255, 255, 0.2);
  --nv-faded-lighter: #a1a1aa;
  --nv-faded-mid: #27272a;

  --font-family-base: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --brand-primary: var(--nv-accent);
  --brand-primary-darker: var(--nv-accent-hover);
  --brand-primary-lighter: var(--nv-accent-hover);
  --brand-primary-lighter-2: var(--nv-overlay-14);
  --brand-primary-lighter-3: var(--nv-overlay-14);
  --brand-primary-lighter-4: var(--nv-overlay-8);
  --brand-primary-gradient-start: var(--nv-surface);
  --brand-primary-gradient-end: var(--nv-hero);
  --brand-primary-gradient-h: linear-gradient(270deg, var(--nv-hero) 0%, var(--nv-surface) 100%);
  --brand-primary-gradient-v: linear-gradient(0deg, var(--nv-hero) 0%, var(--nv-surface) 100%);
  --brand-secondary: var(--nv-border);
  --brand-secondary-darker: var(--nv-hero);
  --brand-secondary-lighter: var(--nv-elevated-border);
  --brand-secondary-lighter-2: var(--nv-elevated-border-top);
  --brand-secondary-lighter-3: var(--nv-overlay-14);
  --brand-secondary-lighter-4: var(--nv-overlay-8);
  --brand-secondary-gradient-h: linear-gradient(270deg, var(--nv-border) 0%, var(--nv-elevated-border) 100%);
  --brand-secondary-gradient-v: linear-gradient(0deg, var(--nv-border) 0%, var(--nv-elevated-border) 100%);
  --gray-base: var(--nv-fg);
  --gray-lighter: var(--nv-muted);
  --gray-lighter-2: var(--nv-faded-lighter);
  --gray-lighter-3: var(--nv-elevated-border);
  --gray-lighter-4: var(--nv-border);
  --gray-faded: var(--nv-surface);
  --gray-faded-2: var(--nv-hero);
  --gray-darker: var(--nv-fg);
  --gray-icons: var(--nv-muted);
  --gray-icons-hover: var(--nv-fg);
  --text-secondary-faded-color: var(--nv-muted);
  --text-body-color: var(--nv-fg);
  --text-heading-color: var(--nv-fg);
  --text-faded-color: var(--nv-faded-lighter);
  --primary-block-bg: var(--nv-surface);
  --primary-block-bg-h: var(--nv-surface);
  --primary-block-title-color: var(--nv-fg);
  --primary-block-subtitle-color: var(--nv-muted);
  --primary-block-text-color: var(--nv-muted);
  --primary-block-text-faded-color: var(--nv-muted);
  --primary-block-total-font-color: var(--nv-fg);
  --primary-block-link-color: var(--nv-muted);
  --primary-block-link-hover-color: var(--nv-fg);
  --primary-block-link-active-color: var(--nv-fg);
  --primary-block-btn-bg: var(--nv-accent);
  --primary-block-btn-border-color: var(--nv-accent);
  --primary-block-btn-color: var(--nv-accent-contrast);
  --primary-block-btn-hover-bg: var(--nv-accent-hover);
  --primary-block-btn-hover-border-color: var(--nv-accent-hover);
  --primary-block-btn-hover-color: var(--nv-accent-contrast);
  --primary-block-input-bg: var(--nv-surface);
  --primary-block-input-border: var(--nv-border);
  --primary-block-input-color: var(--nv-fg);
  --secondary-block-bg: var(--nv-hero);
  --secondary-block-bg-h: var(--nv-hero);
  --secondary-block-title-color: var(--nv-fg);
  --secondary-block-text-color: var(--nv-muted);
  --secondary-block-total-font-color: var(--nv-fg);
  --product-details-bg: var(--nv-surface);
  --product-details-title-color: var(--nv-fg);
  --product-details-text-color: var(--nv-muted);
  --label-primary-bg: var(--nv-ribbon-bg);
  --label-primary-color: var(--nv-ribbon-fg);
  --label-primary-faded-bg: var(--nv-overlay-14);
  --label-primary-faded-color: var(--nv-fg);
  --body-bg: var(--nv-bg);
  --sticky-menu-bg: rgba(9, 9, 11, 0.88);
  --futuristic-bg: none;
  --ui-block-bg: var(--nv-surface);
  --ui-block-overlay-bg: var(--nv-surface);
  --ui-block-overlay-bg-2: var(--nv-hero);
  --ui-block-divider-color: var(--nv-border);
  --ui-block-secondary-divider-border-color: var(--nv-border);
  --ui-block-link-hover-bg: var(--nv-overlay-6);
  --ui-block-link-active-bg: var(--nv-overlay-10);
  --btn-primary-bg: var(--nv-accent);
  --btn-primary-border: var(--nv-accent);
  --btn-primary-color: var(--nv-accent-contrast);
  --btn-primary-hover-bg: var(--nv-accent-hover);
  --btn-primary-hover-border: var(--nv-accent-hover);
  --btn-primary-hover-color: var(--nv-accent-contrast);
  --btn-primary-active-bg: #a1a1aa;
  --btn-primary-active-border: #a1a1aa;
  --btn-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  --btn-primary-faded-bg: var(--nv-overlay-10);
  --btn-primary-faded-border: var(--nv-overlay-14);
  --btn-primary-faded-color: var(--nv-fg);
  --btn-primary-faded-hover-bg: var(--nv-overlay-22);
  --btn-primary-faded-hover-border: var(--nv-overlay-22);
  --btn-primary-faded-hover-color: var(--nv-fg);
  --btn-default-border: var(--nv-border);
  --btn-default-color: var(--nv-fg);
  --btn-default-hover-bg: var(--nv-overlay-8);
  --btn-default-hover-border: var(--nv-elevated-border);
  --btn-default-hover-color: var(--nv-fg);
  --icheck-bg: var(--nv-surface);
  --icheck-border-color: var(--nv-checkbox-border);
  --icheck-hover-bg: var(--nv-checkbox-hover-bg);
  --icheck-hover-border-color: var(--nv-muted);
  --icheck-active-bg: var(--nv-accent);
  --icheck-active-border-color: var(--nv-accent);
  --icheck-active-icon-color: var(--nv-accent-contrast);
  --state-warning-bg: var(--nv-danger-bg);
  --state-warning-border: var(--nv-danger-border);
  --state-warning-text: var(--nv-danger-text);
  --alert-warning-bg: var(--nv-danger-bg);
  --alert-warning-border: var(--nv-danger-border);
  --alert-warning-text: var(--nv-danger-text);
  --state-danger-bg: var(--nv-danger-bg);
  --state-danger-border: var(--nv-danger-border);
  --state-danger-text: var(--nv-danger-text);
  --alert-danger-bg: var(--nv-danger-bg);
  --alert-danger-border: var(--nv-danger-border);
  --alert-danger-text: var(--nv-danger-text);
  --brand-info: var(--nv-info);
  --brand-info-lighter: #7dd3fc;
  --brand-info-lighter-2: var(--nv-info-border);
  --brand-info-lighter-3: var(--nv-info-bg);
  --brand-info-darker: #0ea5e9;
  --state-info-bg: var(--nv-info-bg);
  --state-info-border: var(--nv-info-border);
  --state-info-text: var(--nv-info-text);
  --alert-info-bg: var(--nv-info-bg);
  --alert-info-border: var(--nv-info-border);
  --alert-info-text: var(--nv-info-text);
  --label-info-bg: var(--nv-info-bg);
  --label-info-color: var(--nv-info-text);
  --panel-info-bg: var(--nv-info-bg);
  --panel-info-text: var(--nv-info-text);
  --panel-info-border: var(--nv-info-border);
  --panel-info-heading-bg: var(--nv-info-bg);
  --link-color: var(--nv-muted);
  --link-hover-color: var(--nv-fg);
  --ui-nav-link-color: var(--nv-muted);
  --ui-nav-link-hover-color: var(--nv-fg);
  --ui-nav-link-active-color: var(--nv-fg);
  --input-bg: var(--nv-surface);
  --input-border-color: var(--nv-border);
  --input-color: var(--nv-fg);
  --input-focus-border-color: var(--nv-elevated-border);
  --input-focus-box-shadow: 0 0 0 3px var(--nv-overlay-12);
  --select-option-bg: var(--nv-surface);
  --package-bg: var(--nv-surface);
  --package-border-color: var(--nv-border);
  --package-hover-border-color: var(--nv-elevated-border);
  --package-featured-bg: var(--nv-hero);
  --package-featured-border-color: var(--nv-featured-border);
  --text-primary-color: var(--nv-fg);
  --main-header-banner-bg: var(--nv-hero);
}
/*!
 * Noble VPS Lagom — shared component fixes (all palettes)
 * Requires palette token file loaded first (:root --nv-* variables).
 */

/* ── Body ── */
body.lagom-futuristic,
body.lagom-futuristic.layout-banner,
body.lagom-futuristic .main-body {
  background-color: var(--nv-bg) !important;
  background-image: none !important;
}

/* ── Header logo — slightly larger (default Lagom is 42px) ── */
body.lagom-futuristic {
  --app-nav-logo-height: 64px;
  --mob-app-nav-logo-height: 56px;
  --mob-dropdown-nav-logo-height: 56px;
}

body.lagom-futuristic .app-nav .logo img,
body.lagom-futuristic .app-nav-header .logo img,
body.lagom-futuristic .main-header-top .logo img,
body.lagom-futuristic .navbar-brand img,
body.lagom-futuristic a.logo img {
  height: var(--app-nav-logo-height) !important;
  max-height: var(--app-nav-logo-height) !important;
  width: auto !important;
}

/* ── Buttons — visible hover ── */
body.lagom-futuristic .btn-primary:not(:disabled):not(.disabled):hover,
body.lagom-futuristic .btn-primary:not(:disabled):not(.disabled):focus-visible,
body.lagom-futuristic .btn-primary:not(:disabled):not(.disabled).focus,
body.lagom-futuristic .btn-primary:not(:disabled):not(.disabled):focus {
  background-color: var(--nv-accent-hover) !important;
  border-color: var(--nv-accent-hover) !important;
  color: var(--nv-accent-contrast) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.lagom-futuristic .btn-primary-faded:not(:disabled):not(.disabled):hover,
body.lagom-futuristic .btn-default:not(:disabled):not(.disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

body.lagom-futuristic .btn-default:not(:disabled):not(.disabled):hover {
  background-color: var(--nv-overlay-8) !important;
  border-color: var(--nv-elevated-border) !important;
  color: var(--nv-fg) !important;
}

/* ── Featured ribbon ── */
body.lagom-futuristic .package-featured .label-corner.label-primary,
body.lagom-futuristic .package .label-corner.label-primary,
body.lagom-futuristic .label-corner.label-primary {
  background-color: var(--nv-ribbon-bg) !important;
  color: var(--nv-ribbon-fg) !important;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.lagom-futuristic .package-featured {
  border-color: var(--nv-featured-border) !important;
}

/* ── Checkboxes (iCheck square-blue) ── */
body.lagom-futuristic .icheckbox_square-blue,
body.lagom-futuristic .iradio_square-blue,
body.lagom-futuristic .radio-styled {
  background: var(--nv-surface) !important;
  border: 2px solid var(--nv-checkbox-border) !important;
}

body.lagom-futuristic .icheckbox_square-blue:hover,
body.lagom-futuristic .iradio_square-blue:hover,
body.lagom-futuristic .radio-styled:hover {
  border-color: var(--nv-muted) !important;
  background: var(--nv-checkbox-hover-bg) !important;
}

body.lagom-futuristic .icheckbox_square-blue.checked,
body.lagom-futuristic .iradio_square-blue.checked,
body.lagom-futuristic .radio-styled.checked {
  background: var(--nv-accent) !important;
  border-color: var(--nv-accent) !important;
}

body.lagom-futuristic .icheckbox_square-blue.checked:before,
body.lagom-futuristic .iradio_square-blue.checked:before,
body.lagom-futuristic .radio-styled.checked:before {
  color: var(--nv-accent-contrast) !important;
}

body.lagom-futuristic .icheckbox,
body.lagom-futuristic .iradio {
  background: var(--nv-surface) !important;
  border: 2px solid var(--nv-checkbox-border) !important;
}

body.lagom-futuristic .icheckbox.checked,
body.lagom-futuristic .iradio.checked {
  background: var(--nv-accent) !important;
  border-color: var(--nv-accent) !important;
}

/* ── Info alerts (closed ticket, etc.) — dark glacier ── */
body.lagom-futuristic .alert-lagom.alert-info,
body.lagom-futuristic .alert.alert-info {
  background-color: var(--nv-info-bg) !important;
  border-color: var(--nv-info-border) !important;
  color: var(--nv-info-text) !important;
}

body.lagom-futuristic .alert-lagom.alert-info:before,
body.lagom-futuristic .alert.alert-info:before {
  background: var(--nv-info) !important;
}

body.lagom-futuristic .alert-lagom.alert-info .alert-body,
body.lagom-futuristic .alert-lagom.alert-info .alert-body p,
body.lagom-futuristic .alert-lagom.alert-info .alert-icon,
body.lagom-futuristic .alert.alert-info p {
  color: var(--nv-info-text) !important;
}

/* ── Email verification — red alert ── */
body.lagom-futuristic .alert-lagom.alert-warning.verification-banner,
body.lagom-futuristic .alert-lagom.alert-warning.email-verification,
body.lagom-futuristic .alert-lagom.alert-warning.user-validation,
body.lagom-futuristic .alert-warning.verification-banner,
body.lagom-futuristic .alert-warning.email-verification {
  background-color: var(--nv-danger-bg) !important;
  border-color: var(--nv-danger-border) !important;
  color: var(--nv-danger-text) !important;
}

body.lagom-futuristic .alert-lagom.alert-warning.verification-banner .alert-body,
body.lagom-futuristic .alert-lagom.alert-warning.email-verification .alert-body,
body.lagom-futuristic .alert-lagom.alert-warning.verification-banner .alert-body i,
body.lagom-futuristic .alert-lagom.alert-warning.email-verification .alert-body i,
body.lagom-futuristic .alert-warning.verification-banner p,
body.lagom-futuristic .alert-warning.email-verification p {
  color: var(--nv-danger-text) !important;
}

body.lagom-futuristic .alert-lagom.alert-warning.verification-banner .btn-warning,
body.lagom-futuristic .alert-lagom.alert-warning.email-verification .btn-warning,
body.lagom-futuristic .alert-warning.verification-banner .btn-warning {
  background: var(--nv-danger) !important;
  border-color: var(--nv-danger) !important;
  color: #fff !important;
}

body.lagom-futuristic .alert-lagom.alert-warning.verification-banner .btn-warning:hover,
body.lagom-futuristic .alert-lagom.alert-warning.email-verification .btn-warning:hover {
  background: var(--nv-danger-hover) !important;
  border-color: var(--nv-danger-hover) !important;
  transform: translateY(-1px);
}

body.lagom-futuristic .alert-lagom.alert-warning.alert-faded.client-home-alert {
  background: var(--nv-danger-bg) !important;
  border-color: var(--nv-danger-border) !important;
  color: var(--nv-danger-text) !important;
}

/* ── Invoice summary sidebar ── */
body.lagom-futuristic .panel-summary-primary,
body.lagom-futuristic .panel.panel-summary.panel-summary-primary {
  background: var(--nv-surface) !important;
  background-image: none !important;
  border: 1px solid var(--nv-border) !important;
  color: var(--nv-muted) !important;
}

body.lagom-futuristic .panel-summary-primary .price,
body.lagom-futuristic .panel-summary-primary .price-title,
body.lagom-futuristic .panel-summary-primary .price-amount,
body.lagom-futuristic .panel-summary-primary .price .price-title,
body.lagom-futuristic .panel-summary-primary .price .price-total,
body.lagom-futuristic .panel-summary-primary .panel-body {
  color: var(--nv-fg) !important;
}

body.lagom-futuristic .panel-summary-primary .price .price-title {
  color: var(--nv-muted) !important;
}

body.lagom-futuristic .panel-summary-primary .btn-primary-faded,
body.lagom-futuristic .panel-summary-primary .btn-primary-faded:hover {
  background: var(--nv-accent) !important;
  border-color: var(--nv-accent) !important;
  color: var(--nv-accent-contrast) !important;
}

body.lagom-futuristic .panel-summary-primary .btn-primary-faded:hover {
  background: var(--nv-accent-hover) !important;
  border-color: var(--nv-accent-hover) !important;
}

/* ── 3D dropdowns (payment method + Store) ── */
body.lagom-futuristic .panel-summary-primary label,
body.lagom-futuristic .panel-view-invoice label {
  color: var(--nv-muted) !important;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

body.lagom-futuristic .panel-summary-primary select.form-control,
body.lagom-futuristic .panel-view-invoice select.form-control,
body.lagom-futuristic .panel-summary-primary .form-control select,
body.lagom-futuristic .panel-summary-secondary select.form-control,
body.lagom-futuristic .top-nav > li.dropdown:not([menuitemname="Account"]):not([menuitemname="Notifications"]):not([data-language-select]) > a.dropdown-toggle,
body.lagom-futuristic .top-nav > li.dropdown[menuitemname="Store"] > a.dropdown-toggle,
body.lagom-futuristic .app-nav-menu-primary .menu > li.dropdown.nav-item-btn:not(.my-account) > a.dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--nv-elevated) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, var(--nv-elevated-top) 0%, var(--nv-elevated) 55%, var(--nv-elevated-bottom) 100%) !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--nv-elevated-border) !important;
  border-top-color: var(--nv-elevated-border-top) !important;
  border-bottom-color: var(--nv-elevated) !important;
  border-radius: 8px !important;
  color: var(--nv-fg) !important;
  cursor: pointer !important;
  font-weight: 500;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    background 0.15s ease;
}

body.lagom-futuristic .panel-summary-primary select.form-control,
body.lagom-futuristic .panel-view-invoice select.form-control,
body.lagom-futuristic .panel-summary-secondary select.form-control {
  min-height: 44px;
  padding: 10px 40px 10px 14px !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, var(--nv-elevated-top) 0%, var(--nv-elevated) 55%, var(--nv-elevated-bottom) 100%) !important;
  background-position: right 14px center, 0 0, 0 0 !important;
  background-size: 12px, 100% 100%, 100% 100% !important;
}

body.lagom-futuristic .top-nav > li.dropdown:not([menuitemname="Account"]):not([menuitemname="Notifications"]):not([data-language-select]) > a.dropdown-toggle,
body.lagom-futuristic .top-nav > li.dropdown[menuitemname="Store"] > a.dropdown-toggle,
body.lagom-futuristic .app-nav-menu-primary .menu > li.dropdown.nav-item-btn:not(.my-account) > a.dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px !important;
  text-decoration: none !important;
}

body.lagom-futuristic .panel-summary-primary select.form-control:hover,
body.lagom-futuristic .panel-view-invoice select.form-control:hover,
body.lagom-futuristic .panel-summary-secondary select.form-control:hover,
body.lagom-futuristic .top-nav > li.dropdown:not([menuitemname="Account"]):not([menuitemname="Notifications"]):not([data-language-select]) > a.dropdown-toggle:hover,
body.lagom-futuristic .top-nav > li.dropdown:not([menuitemname="Account"]):not([menuitemname="Notifications"]):not([data-language-select]) > a.dropdown-toggle:focus,
body.lagom-futuristic .top-nav > li.dropdown[menuitemname="Store"] > a.dropdown-toggle:hover,
body.lagom-futuristic .top-nav > li.dropdown[menuitemname="Store"] > a.dropdown-toggle:focus,
body.lagom-futuristic .app-nav-menu-primary .menu > li.dropdown.nav-item-btn:not(.my-account) > a.dropdown-toggle:hover,
body.lagom-futuristic .app-nav-menu-primary .menu > li.dropdown.nav-item-btn:not(.my-account) > a.dropdown-toggle:focus {
  color: var(--nv-fg) !important;
  border-color: var(--nv-muted) !important;
  border-top-color: var(--nv-fg) !important;
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    inset 0 -2px 0 rgba(0, 0, 0, 0.2) !important;
}

body.lagom-futuristic .panel-summary-primary select.form-control:focus,
body.lagom-futuristic .panel-view-invoice select.form-control:focus,
body.lagom-futuristic .panel-summary-secondary select.form-control:focus {
  outline: none !important;
  border-color: var(--nv-fg) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.55),
    0 0 0 3px var(--nv-overlay-12),
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    inset 0 -2px 0 rgba(0, 0, 0, 0.2) !important;
}

body.lagom-futuristic .panel-summary-primary select.form-control option,
body.lagom-futuristic .panel-view-invoice select.form-control option {
  background: var(--nv-surface);
  color: var(--nv-fg);
}

body.lagom-futuristic .top-nav > li.dropdown:not([menuitemname="Account"]):not([menuitemname="Notifications"]):not([data-language-select]) > a.dropdown-toggle .ls-caret,
body.lagom-futuristic .top-nav > li.dropdown[menuitemname="Store"] > a.dropdown-toggle .ls-caret {
  color: var(--nv-muted) !important;
  margin-left: 2px;
}

body.lagom-futuristic .top-nav > li.dropdown:not([menuitemname="Account"]):not([menuitemname="Notifications"]):not([data-language-select]).open > a.dropdown-toggle,
body.lagom-futuristic .top-nav > li.dropdown[menuitemname="Store"].open > a.dropdown-toggle,
body.lagom-futuristic .top-nav > li.dropdown:not([menuitemname="Account"]):not([menuitemname="Notifications"]):not([data-language-select]).show > a.dropdown-toggle {
  border-color: var(--nv-fg) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 0 0 3px var(--nv-overlay-10),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

/* ── Product details hero box ── */
body.lagom-futuristic .product-details .product-icon:not(.panel-default),
body.lagom-futuristic .product-icon:not(.panel-default) {
  background: var(--nv-surface) !important;
  background-image: none !important;
  border: 1px solid var(--nv-border) !important;
  box-shadow: none !important;
}

body.lagom-futuristic .product-details .product-icon:not(.panel-default) .product-name,
body.lagom-futuristic .product-details .product-icon:not(.panel-default) .product-group-name,
body.lagom-futuristic .product-details .product-icon:not(.panel-default) h2,
body.lagom-futuristic .product-icon:not(.panel-default) .product-name {
  color: var(--nv-fg) !important;
}

body.lagom-futuristic .product-details .product-icon:not(.panel-default) .product-footer,
body.lagom-futuristic .product-icon:not(.panel-default) .product-footer {
  color: var(--nv-muted) !important;
}

body.lagom-futuristic .product-details .product-info {
  background: var(--nv-surface) !important;
  border-color: var(--nv-border) !important;
  color: var(--nv-muted) !important;
}

/* ── General panels & store cards ── */
body.lagom-futuristic .panel-default,
body.lagom-futuristic .panel-form {
  background: var(--nv-surface);
  border-color: var(--nv-border);
}

body.lagom-futuristic .package {
  background: var(--nv-surface);
  border-color: var(--nv-border);
}

body.lagom-futuristic .package:hover {
  border-color: var(--nv-elevated-border);
}

body.lagom-futuristic .app-nav-top {
  border-bottom-color: var(--nv-border);
}

body.lagom-futuristic .panel-sidebar .list-group-item.active,
body.lagom-futuristic .panel-sidebar .list-group-item:hover {
  background: var(--nv-overlay-6);
  color: var(--nv-fg);
}

/*
 * Sidebar action panels (Actions, etc.):
 * Make the whole panel one card and zero out inner horizontal padding
 * so the title and list icons share the same left edge.
 */
body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) {
  background: var(--nv-surface, var(--ui-block-bg)) !important;
  border: 1px solid var(--nv-border, transparent) !important;
  border-radius: var(--ui-block-border-radius, 12px) !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
  overflow: hidden;
}

body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .panel-heading {
  padding: 0 0 10px !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .panel-heading .panel-title {
  margin: 0 !important;
  padding: 0 !important;
}

body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .list-group {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .list-group > .list-group-item,
body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .list-group > a.list-group-item {
  padding: 8px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  width: 100% !important;
}

body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .list-group > a.list-group-item:hover,
body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .list-group > a.list-group-item:focus,
body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .list-group > a.list-group-item.active {
  padding: 8px 0 !important;
}

/* Fixed icon column so glyph widths don't shift the text */
body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .list-group > .list-group-item > i:first-child,
body.lagom-futuristic .panel-sidebar:not(.panel-summary):not(.panel-client-details):not(.panel-ticket-information):not(.panel-add-funds):not(.panel-register) > .list-group > a.list-group-item > i:first-child {
  width: 1.25em !important;
  min-width: 1.25em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-right: 10px !important;
  margin-left: 0 !important;
}

body.lagom-futuristic .main-footer {
  border-top-color: var(--nv-border);
  color: var(--nv-muted);
}

::selection {
  background: var(--nv-selection-bg);
  color: var(--nv-fg);
}

/* Lagom switch ON label defaults to #fff; glacier brand is near-white so ON is unreadable */
.switch--text .switch__checkbox:checked + .switch__container:after {
  color: var(--nv-accent-contrast) !important;
}

.switch--text .switch__checkbox + .switch__container:after {
  color: var(--nv-muted) !important;
}

.bootstrap-switch-on .bootstrap-switch-handle-on {
  color: var(--nv-accent-contrast) !important;
}