/* HOSTOWEB OrderFlow v1.7.5 — VPS OS picker only. Does NOT modify custom.css. */
#order-standard_cart .of-os-native-select {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
  border: 0 !important;
}
.of-os-picker {
  --os-blue: var(--of-blue, #1768eb);
  --os-line: var(--of-border, #dde7f3);
  --os-ink: var(--of-ink, #15243f);
  --os-muted: var(--of-muted, #62748b);
  width: 100%;
  max-width: 100%;
  margin: 1px 0 18px;
  color: var(--os-ink);
  font-family: inherit;
}
.of-os-picker button { font-family: inherit; cursor: pointer; }
.of-os-picker .of-os-trigger {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 78px; padding: 13px 17px;
  border: 1px solid #d7e3f2; border-radius: 14px;
  background: #fff; color: var(--os-ink); text-align: left;
  box-shadow: 0 5px 18px rgba(21,54,101,.035);
  transition: border-color .15s, box-shadow .15s;
}
.of-os-picker .of-os-trigger:hover { border-color: #8baff0; background: #fafcff; }
.of-os-picker.is-open .of-os-trigger {
  border-color: var(--os-blue); border-radius: 14px 14px 0 0;
  box-shadow: 0 0 0 3px rgba(23,104,235,.08);
}
.of-os-picker .of-os-icon {
  display: inline-grid; place-items: center;
  width: 43px; height: 43px; flex: 0 0 43px;
  border-radius: 11px;
  background: var(--os-tint, #eff3f9);
  color: var(--os-accent, #3a6485);
}
.of-os-picker .of-os-icon svg {
  display: block; width: 26px; height: 26px;
}
.of-os-picker .of-os-trigger-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.of-os-picker .of-os-current-name {
  font-size: 16px; line-height: 1.4; font-weight: 750;
  white-space: normal; overflow-wrap: anywhere;
}
.of-os-picker .of-os-current-sub { font-size: 12px; color: var(--os-muted); font-weight: 500; }
.of-os-picker .of-os-trigger-change { font-size: 12px; font-weight: 750; color: var(--os-blue); white-space: nowrap; }
.of-os-picker .of-os-trigger-chevron svg { display: block; width: 19px; height: 19px; fill: none; stroke: #7689a0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.of-os-picker.is-open .of-os-trigger-chevron { transform: rotate(180deg); }
.of-os-picker .of-os-panel {
  position: relative; z-index: 5;
  width: 100%; padding: 18px;
  border: 1px solid #d7e3f2; border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #fff;
  box-shadow: 0 13px 22px rgba(22,53,96,.055);
}
.of-os-picker .of-os-panel[hidden] { display: none !important; }
.of-os-picker .of-os-search-wrap { position: relative; margin-bottom: 17px; }
.of-os-picker .of-os-search-wrap svg {
  width: 19px; height: 19px; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  fill: none; stroke: #7890a8; stroke-width: 1.8; stroke-linecap: round;
}
.of-os-picker .of-os-search {
  display: block; width: 100%; height: 45px; min-height: 45px;
  padding: 10px 13px 10px 44px;
  border: 1px solid #dce7f2; border-radius: 11px;
  background: #f9fbfe; color: var(--os-ink);
  font-size: 13px; outline: none;
}
.of-os-picker .of-os-search:focus { border-color: #90b3ed; box-shadow: 0 0 0 3px rgba(23,104,235,.08); }
.of-os-picker .of-os-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 19px; }
.of-os-picker .of-os-families-col { min-width: 0; border-right: 1px solid #e9eef6; padding-right: 18px; }
.of-os-picker .of-os-versions-col { min-width: 0; }
.of-os-picker .of-os-column-heading {
  display: block; margin: 0 0 11px;
  font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: #7b8ba1;
}
.of-os-picker .of-os-families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.of-os-picker .of-os-family {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 57px; padding: 8px;
  border: 1px solid #e4eaf3; border-radius: 10px;
  background: #fff; color: var(--os-ink);
  text-align: left; transition: background .15s, border-color .15s;
}
.of-os-picker .of-os-family:hover { background: #f7faff; border-color: #bdcfee; }
.of-os-picker .of-os-family.is-active { border-color: #9ebdf2; background: #f1f6ff; box-shadow: inset 0 0 0 1px rgba(23,104,235,.04); }
.of-os-picker .of-os-family .of-os-icon { width: 35px; height: 35px; flex: 0 0 35px; border-radius: 8px; }
.of-os-picker .of-os-family .of-os-icon svg { width: 21px; height: 21px; }
.of-os-picker .of-os-family-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.of-os-picker .of-os-family-name { font-size: 12px; font-weight: 740; line-height: 1.25; overflow-wrap: anywhere; }
.of-os-picker .of-os-family-count { font-size: 10px; color: #8996a9; font-weight: 500; }
.of-os-picker .of-os-versions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; align-content: start; }
.of-os-picker .of-os-version {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 39px;
  padding: 9px 11px; border: 1px solid #e1e9f2; border-radius: 9px;
  color: #334a68; background: #fff; text-align: left;
  font-size: 12px; font-weight: 650;
}
.of-os-picker .of-os-version:hover { border-color: #99b9ef; background: #f8faff; }
.of-os-picker .of-os-version.is-current { color: #145cce; background: #f0f6ff; border-color: #a5c3f7; }
.of-os-picker .of-os-version-name { flex: 1; min-width: 0; }
.of-os-picker .of-os-evaluation { font-size: 10px; color: #a36513; background: #fff5df; padding: 2px 5px; border-radius: 4px; }
.of-os-picker .of-os-current-mark { color: #1770dc; margin-left: auto; font-weight: 800; }
.of-os-picker .of-os-empty { padding: 16px; color: #8694a8; font-size: 13px; }
.of-os-picker :is(button, input):focus-visible { outline: 3px solid rgba(23,101,233,.25); outline-offset: 2px; }
@media (max-width: 700px) {
  .of-os-picker .of-os-content { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .of-os-picker .of-os-families-col { border-right: 0; border-bottom: 1px solid #e9eef6; padding-right: 0; padding-bottom: 16px; }
  .of-os-picker .of-os-versions { grid-template-columns: minmax(0,1fr); }
  .of-os-picker .of-os-panel { padding: 14px; }
  .of-os-picker .of-os-trigger { padding: 11px 13px; gap: 10px; }
  .of-os-picker .of-os-trigger-change { font-size: 11px; }
  .of-os-picker .of-os-current-name { font-size: 14px; }
}
@media (max-width: 350px) {
  .of-os-picker .of-os-families { grid-template-columns: minmax(0,1fr); }
}


/* v1.7.5 — modal OS selector: never constrained by WHMCS's 2-column form. */
body.of-os-modal-open { overflow: hidden !important; }
.of-os-overlay, .of-os-overlay *, .of-os-overlay *::before, .of-os-overlay *::after { box-sizing: border-box; }
.of-os-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; justify-content: center; align-items: center;
  padding: 22px; background: rgba(9, 24, 48, .58);
  backdrop-filter: blur(3px);
  overscroll-behavior: contain;
}
.of-os-overlay[hidden] { display: none !important; }
.of-os-overlay .of-os-dialog {
  --os-blue: #1768eb; --os-line: #dde7f3;
  --os-ink: #15243f; --os-muted: #62748b;
  display: flex; flex-direction: column;
  width: min(100%, 780px); max-width: 780px;
  max-height: min(92dvh, 780px);
  margin: 0; border: 1px solid #dce6f3; border-radius: 18px;
  background: #fff; overflow: hidden; color: var(--os-ink);
  box-shadow: 0 26px 90px rgba(5, 24, 57, .26);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px; line-height: 1.45;
}
.of-os-overlay .of-os-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 15px; padding: 19px 24px;
  border-bottom: 1px solid #e4ebf5;
}
.of-os-overlay .of-os-dialog-title {
  font-size: 20px; font-weight: 760; letter-spacing: -.025em;
  line-height: 1.35; margin: 0; padding: 0; color: #15243f;
}
.of-os-overlay .of-os-dialog-close {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
  padding: 0; border: 1px solid #e0e7f1; border-radius: 9px;
  color: #52647e; background: #f7f9fd;
}
.of-os-overlay .of-os-dialog-close:hover { background: #edf4ff; border-color: #a7c5ee; }
.of-os-overlay .of-os-dialog-close svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.of-os-overlay .of-os-panel {
  flex: 1 1 auto; min-height: 0;
  position: static; z-index: auto; border: 0; border-radius: 0;
  padding: 22px 24px 24px; overflow-y: auto; overflow-x: hidden;
  box-shadow: none;
}
.of-os-overlay .of-os-content { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 25px; }
.of-os-overlay .of-os-families-col { padding-right: 24px; }
.of-os-overlay .of-os-families { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.of-os-overlay .of-os-family { min-height: 65px; padding: 9px 10px; gap: 10px; }
.of-os-overlay .of-os-family-name { font-size: 12px; overflow-wrap: normal; word-break: normal; }
.of-os-overlay .of-os-family-count { font-size: 11px; }
.of-os-overlay .of-os-version { min-height: 49px; padding: 10px 12px; }
.of-os-overlay .of-os-version-name { overflow-wrap: normal; word-break: normal; }
.of-os-overlay .of-os-column-heading { margin-bottom: 12px; }
.of-os-overlay .of-os-search-wrap { margin-bottom: 19px; }
.of-os-overlay .of-os-search { font-size: 14px; }
/* Native OS picker trigger stays compact, regardless of the number of form columns. */
#order-standard_cart .of-os-picker .of-os-trigger { min-height: 65px; padding: 11px 12px; gap: 10px; border-radius: 12px; }
#order-standard_cart .of-os-picker .of-os-trigger-change { margin-left: auto; }
#order-standard_cart .of-os-picker.is-open .of-os-trigger { border-radius: 12px; }
#order-standard_cart .of-os-picker .of-os-current-sub { line-height: 1.25; }
@media(max-width: 700px) {
  .of-os-overlay { padding: 10px; align-items: center; }
  .of-os-overlay .of-os-dialog { max-height: 94dvh; border-radius: 15px; }
  .of-os-overlay .of-os-dialog-header { padding: 14px 16px; }
  .of-os-overlay .of-os-dialog-title { font-size: 17px; }
  .of-os-overlay .of-os-panel { padding: 15px; }
  .of-os-overlay .of-os-content { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .of-os-overlay .of-os-families-col { border-right: 0; border-bottom: 1px solid #e9eef6; padding: 0 0 16px; }
  .of-os-overlay .of-os-families { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .of-os-overlay .of-os-versions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width: 380px) {
  .of-os-overlay .of-os-version { padding: 8px; }
  .of-os-overlay .of-os-families .of-os-icon { width: 29px; height: 29px; flex: 0 0 29px; }
  .of-os-overlay .of-os-family { gap: 7px; }
  #order-standard_cart .of-os-picker .of-os-trigger-change { display: none; }
}

/* v1.7.6 — OS configurable option occupies its own Bootstrap row. */
#order-standard_cart #frmConfigureProduct .of-os-full-column {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  clear: both;
  min-width: 0;
}

/* v1.7.7 — display provided distro SVG logos at the same size as previous pictograms. */
.of-os-picker .of-os-icon img { display: block; width: 26px; height: 26px; object-fit: contain; }
.of-os-picker .of-os-family .of-os-icon img { width: 21px; height: 21px; }