/* layout.css */
/* Shared responsive geometry. Keep WHMCS forms, totals and payment handlers intact. */
:root {
  --os-shell-width: 1440px;
  --os-page-gutter: clamp(16px, 3vw, 48px);
  --os-layout-gap: clamp(18px, 2vw, 28px);
  --os-card-padding: clamp(18px, 2.4vw, 32px);
}

/* One alignment for the header, breadcrumb, page content and footer. */
body.os-fluid-layout #header .container,
body.os-fluid-layout .master-breadcrumb > .container,
body.os-fluid-layout #main-body > .container,
body.os-fluid-layout footer.footer > .container {
  width: calc(100% - var(--os-page-gutter) * 2);
  max-width: var(--os-shell-width) !important;
  margin-inline: auto;
  padding-inline: 0;
}
body.os-fluid-layout #main-body {
  padding-block: clamp(24px, 3vw, 42px) clamp(32px, 4vw, 56px);
}
body.os-fluid-layout #header > .navbar { padding-inline: 0; }
.os-page-layout, .os-page-layout > *, .os-fluid-layout .card,
.os-fluid-layout .card-body, .os-fluid-layout .input-group { min-width: 0; }
.os-fluid-layout .primary-content { overflow-wrap: anywhere; }
.os-fluid-layout .primary-content h1 { font-size: clamp(27px, 2.5vw, 38px); line-height: 1.2; }
.os-fluid-layout .primary-content h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }
.os-fluid-layout .card-title { line-height: 1.35; }
.os-fluid-layout .breadcrumb { flex-wrap: wrap; overflow-wrap: anywhere; }

@media (min-width: 992px) {
  .os-fluid-layout .os-with-sidebar {
    display: grid;
    grid-template-columns: minmax(220px, 264px) minmax(0, 1fr);
    gap: var(--os-layout-gap);
    margin-inline: 0;
    align-items: start;
  }
  .os-fluid-layout .os-with-sidebar > .os-page-sidebar,
  .os-fluid-layout .os-with-sidebar > .primary-content {
    width: 100%; max-width: none; padding-inline: 0;
  }
}
.os-fluid-layout .sidebar .list-group-item { white-space: normal; overflow-wrap: anywhere; }
.os-fluid-layout .sidebar .list-group-item .badge { flex-shrink: 0; }

/* The parent already supplies the login card: do not frame it a second time. */
.os-fluid-layout .login-form {
  width: 100%; max-width: 540px; margin: 0 auto;
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
.os-fluid-layout .login-form > .card {
  width: 100%; max-width: none; margin: 0 !important;
}
.os-fluid-layout .login-form .card-body,
.os-fluid-layout .primary-content > .row > .card.mw-540 .card-body {
  padding: var(--os-card-padding) !important;
}
.os-fluid-layout .login-form .card-footer { padding: 18px var(--os-card-padding) !important; }
.os-fluid-layout .primary-content > .row > .card.mw-540 {
  width: 100%; max-width: 540px; margin-inline: 15px;
}
.os-fluid-layout #registration { width: 100%; max-width: 1000px; margin-inline: auto; }
.os-fluid-layout #registration .card-body { padding: var(--os-card-padding) !important; }
.os-fluid-layout #registration .field { min-height: 44px; border-radius: 8px; border: 1px solid #a9c1dc; background: #fff; color: #173c64; }
.os-fluid-layout #registration .prepend-icon .field-icon { height: 44px; line-height: 44px; }
.os-fluid-layout .primary-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
.os-fluid-layout .primary-content select,
.os-fluid-layout .primary-content textarea { max-width: 100%; }
.os-fluid-layout .input-group > .form-control { width: 1%; min-width: 0; }
.os-fluid-layout .form-control, .os-fluid-layout select.field { min-width: 0; }

/* Readable documentation; wide code and tables scroll inside their own area. */
.os-fluid-layout article { max-width: 100%; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.os-fluid-layout article > p, .os-fluid-layout article > ul, .os-fluid-layout article > ol { max-width: 85ch; }
.os-fluid-layout article img, .os-fluid-layout article video { max-width: 100% !important; height: auto !important; }
.os-fluid-layout article iframe[src*="youtube"],
.os-fluid-layout article iframe[src*="vimeo"] { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
.os-fluid-layout pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.os-fluid-layout .table-container, .os-fluid-layout .table-responsive { max-width: 100%; overflow-x: auto; }
.os-fluid-layout .table-container .table-list { min-width: 640px; }
.os-fluid-layout article table { display: block; max-width: 100%; overflow-x: auto; }
.os-fluid-layout .primary-content .row > div:has(> .kb-category) { display: flex; }
.os-fluid-layout .kb-category { width: 100%; }
.os-fluid-layout .kb-category .h5 { display: block; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; }
.os-fluid-layout .kb-category .badge { margin: 2px 0 6px 10px; font-size: 11px; white-space: nowrap; }
.os-fluid-layout .kb-article-item { white-space: normal; overflow-wrap: anywhere; }

/* Flexible homepage panels and product cards, without changing their order. */
.os-fluid-layout .os-hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); padding: clamp(22px, 3.5vw, 48px);
}
.os-fluid-layout .os-hero h1 { font-size: clamp(30px, 3.2vw, 48px); }
.os-fluid-layout .os-hero > *, .os-fluid-layout .os-console a > span { min-width: 0; }
.os-fluid-layout .os-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--os-layout-gap); }
.os-fluid-layout .os-quick { padding: clamp(20px, 2.4vw, 30px); }
.os-fluid-layout #order-modern .product > .name { font-size: clamp(20px, 1.7vw, 24px); }
.os-fluid-layout #order-modern .product > div.pricing > span.pricing { font-size: clamp(28px, 2.4vw, 34px); }
.os-fluid-layout #order-modern .os-price-amount { white-space: nowrap; }

/* Extend the configurator geometry to the remaining standard-cart pages. */
.os-fluid-layout #order-standard_cart > .row { display: block; margin-inline: 0; }
.os-fluid-layout #order-standard_cart > .row > .cart-sidebar { display: none; }
.os-fluid-layout #order-standard_cart > .row > .cart-body { width: 100%; float: none; padding: 0; }
.os-fluid-layout #order-standard_cart .sidebar-collapsed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.os-fluid-layout #order-standard_cart .cart-body > .row:has(> .secondary-cart-body),
.os-fluid-layout #order-standard_cart #frmConfigureProduct > .row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
  align-items: start; gap: var(--os-layout-gap); margin-inline: 0;
}
.os-fluid-layout #order-standard_cart .secondary-cart-body,
.os-fluid-layout #order-standard_cart .secondary-cart-sidebar { width: auto; float: none; min-width: 0; padding: 0; }
.os-fluid-layout #order-standard_cart .secondary-cart-sidebar { position: sticky; top: 20px; margin: 0; justify-self: stretch; }
.os-fluid-layout #order-standard_cart #inputBillingcycle { min-width: 0; width: min(100%, 440px); }
.os-fluid-layout #order-standard_cart .product-info { margin-top: 16px; }
.os-fluid-layout #order-standard_cart .view-cart-items .item { overflow-wrap: anywhere; }
.os-fluid-layout #order-standard_cart .view-cart-items .item .item-price { white-space: normal; }

/* Invoice documents have their own WHMCS header, so keep sizing separate. */
@media screen {
  .os-invoice-page .invoice-container {
    box-sizing: border-box; width: calc(100% - var(--os-page-gutter) * 2);
    max-width: 1100px; margin: 24px auto; padding: clamp(18px, 3vw, 40px);
  }
  .os-invoice-page .invoice-col { min-width: 0; overflow-wrap: anywhere; }
  .os-invoice-page .invoice-header img { max-width: 100%; height: auto; }
  .os-invoice-page .table-responsive { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 1199px) {
  .os-fluid-layout #header > .navbar-light > .container { flex-wrap: nowrap; gap: 12px; }
  .os-fluid-layout #header .navbar-light .form-inline { display: none; }
  .os-fluid-layout #header .navbar-brand { margin-right: 0 !important; min-width: 0; }
  .os-fluid-layout #header .toolbar { margin-left: auto; flex-direction: row; gap: 8px; flex-shrink: 0; }
  .os-fluid-layout #header .toolbar .nav-item { margin-left: 0 !important; }
  .os-fluid-layout #header .toolbar .nav-link { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px; }
  .os-fluid-layout #mainNavbar { padding-block: 12px; }
  .os-fluid-layout #header .navbar .nav-link { white-space: normal; }
}
@media (max-width: 991px) {
  .os-fluid-layout .os-hero { grid-template-columns: 1fr; }
  .os-fluid-layout .os-console { width: 100%; }
  .os-fluid-layout .os-console a { padding: 15px; }
  .os-fluid-layout #order-standard_cart .cart-body > .row:has(> .secondary-cart-body),
  .os-fluid-layout #order-standard_cart #frmConfigureProduct > .row { grid-template-columns: 1fr; }
  .os-fluid-layout #order-standard_cart .secondary-cart-sidebar,
  .os-fluid-layout #order-standard_cart #frmConfigureProduct .secondary-cart-sidebar { position: static; }
  .os-fluid-layout #order-standard_cart .sidebar-collapsed { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .os-fluid-layout .os-quick-grid { grid-template-columns: 1fr; }
  .os-fluid-layout .primary-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
  .os-fluid-layout .primary-content select, .os-fluid-layout .primary-content textarea { font-size: 16px; }
  .os-fluid-layout .primary-content .kb-search { flex-wrap: nowrap; }
  .os-fluid-layout .kb-search .btn { padding-inline: 14px; font-size: 14px; }
  .os-fluid-layout .primary-content article h1 .btn { float: none !important; margin-top: 12px; }
  .os-fluid-layout .os-bottom { align-items: flex-start; flex-direction: column; }
  .os-fluid-layout footer.footer .list-inline-item { margin-bottom: 8px; }
}
@media (max-width: 575px) {
  .os-fluid-layout #header .navbar-brand .logo-img { width: 144px; max-width: 100%; }
  .os-fluid-layout #header .navbar-brand { padding-block: 10px; }
  .os-fluid-layout #header .active-client, .os-fluid-layout #header .active-client .btn-group { flex-wrap: wrap; }
  .os-fluid-layout .login-form .card-body > .form-group .d-flex { flex-wrap: wrap; gap: 2px 12px; }
  .os-fluid-layout .os-actions { display: grid; grid-template-columns: 1fr; }
  .os-fluid-layout .os-actions .btn { width: 100%; white-space: normal; }
  .os-fluid-layout #order-standard_cart .sidebar-collapsed > .card { flex-wrap: wrap; gap: 8px; }
  .os-fluid-layout #order-standard_cart .sidebar-collapsed .card-body { flex-basis: 180px; }
  .os-fluid-layout .pagination { flex-wrap: wrap; gap: 4px; }
}
/* The fixed-width reCAPTCHA widget must remain entirely visible on small phones. */
@media (max-width: 360px) {
  .os-fluid-layout .recaptcha-container { transform: scale(.8); transform-origin: top center; margin-bottom: 0; }
  .os-fluid-layout .login-form .card-body { padding-inline: 14px !important; }
}
@media print {
  body.os-fluid-layout #main-body > .container { width: 100%; max-width: none !important; }
  .os-fluid-layout .os-with-sidebar { display: block; }
  .os-fluid-layout .os-page-sidebar { display: none; }
  .os-fluid-layout .table-container, .os-fluid-layout .table-responsive { overflow: visible; }
}

/* header-search.css */
/* One continuous search field; the outer group owns the border and corners. */
body.os-fluid-layout #header .input-group.search{width:340px;max-width:100%;height:46px;flex-wrap:nowrap;padding:0;border:1px solid #3b5874;border-radius:12px;background:#17324e;overflow:hidden;isolation:isolate;box-shadow:none;transition:border-color .15s,box-shadow .15s}
body.os-fluid-layout #header .input-group.search:focus-within{border-color:#7cb6ed;box-shadow:0 0 0 3px #76b5ef22}
body.os-fluid-layout #header .input-group.search .input-group-prepend{display:flex;flex:0 0 44px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
body.os-fluid-layout #header .input-group.search .btn{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0!important;box-shadow:none;background:transparent;color:#9ec6ec;line-height:1;outline:0}
body.os-fluid-layout #header .input-group.search .btn:hover{background:#234460;color:#e2f1ff}
body.os-fluid-layout #header .input-group.search .btn:focus-visible{outline:2px solid #a6d3ff;outline-offset:-5px}
body.os-fluid-layout #header .input-group.search .btn i{display:none}
body.os-fluid-layout #header .input-group.search .btn::before{content:"";display:block;width:19px;height:19px;background:currentColor;-webkit-mask:var(--os-search-icon) center/contain no-repeat;mask:var(--os-search-icon) center/contain no-repeat}
body.os-fluid-layout #header .input-group.search .form-control{display:block;flex:1 1 0%;width:1%;min-width:0;max-width:100%;height:44px;min-height:44px;margin:0;padding:10px 14px 10px 2px;border:0;border-radius:0!important;box-shadow:none!important;background:transparent;color:#edf5ff;font-family:inherit;font-size:14px;font-weight:400!important;line-height:1.5;outline:0}
body.os-fluid-layout #header .input-group.search .form-control::placeholder{color:#bdcddd;opacity:1}
body.os-fluid-layout #header .input-group.search .form-control:-webkit-autofill{-webkit-text-fill-color:#edf5ff;-webkit-box-shadow:0 0 0 80px #17324e inset!important;caret-color:#edf5ff}
@media(prefers-reduced-motion:reduce){body.os-fluid-layout #header .input-group.search{transition:none}}

body.os-fluid-layout #header .input-group.search{--os-search-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22m16%2016%205%205%22%2F%3E%3C%2Fsvg%3E")}