/* YCW Portal 1.2.4 RC15 | Balanced: centered content, desktop context rail.
   Loaded after RC12; Wide and Boxed retain their existing geometry.
   The right rail remains a drawer on narrower screens.
*/
:root {
  --ycw-balanced-width: 1180px;
  --ycw-balanced-commerce-width: 1360px;
}

/* Compact, accessible header chooser with three explicit layout options. */
body.ycw-portal .ycw-modern-header .ycw-layout-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
body.ycw-portal .ycw-layout-choices[hidden] { display: none !important; }
body.ycw-portal .ycw-layout-choices {
  position: absolute;
  z-index: 1500;
  top: calc(100% + 10px);
  right: 0;
  width: min(312px, calc(100vw - 24px));
  padding: 9px;
  background: #fff;
  border: 1px solid #e0e7f0;
  border-radius: 15px;
  box-shadow: 0 22px 65px rgba(24,44,77,.17);
  text-align: left;
}
body.ycw-portal .ycw-layout-choices-heading {
  display: block;
  padding: 7px 11px 10px;
  color: #7c899c;
  font: 700 10px/1.4 'Poppins',sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
body.ycw-portal .ycw-modern-header .ycw-layout-option {
  display: grid !important;
  grid-template-columns: 32px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 10px !important;
  margin: 0 !important;
  color: #162743 !important;
  background: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  text-align: left !important;
  cursor: pointer;
}
body.ycw-portal .ycw-layout-option > i:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #eef4fc;
  color: #4374bd;
  border-radius: 8px;
}
body.ycw-portal .ycw-layout-option span { min-width: 0; display: grid; gap: 4px; }
body.ycw-portal .ycw-layout-option strong { font: 700 12px/1.3 'Poppins',sans-serif; color: #142440; }
body.ycw-portal .ycw-layout-option strong small {
  margin-left: 4px;
  padding: 2px 5px;
  background: #fff0e7;
  color: #e65200;
  border-radius: 5px;
  font-size: 9px;
}
body.ycw-portal .ycw-layout-option span > small { color: #71829a; font: 500 10px/1.45 'Poppins',sans-serif; }
body.ycw-portal .ycw-layout-option > .ycw-layout-check { display: none; color: #ff5900; font-size: 14px; }
body.ycw-portal .ycw-layout-option[aria-pressed='true'] > .ycw-layout-check { display: block; }
body.ycw-portal .ycw-modern-header .ycw-layout-option:hover,
body.ycw-portal .ycw-modern-header .ycw-layout-option[aria-pressed='true'] {
  background: #fff8f3 !important;
  border-color: #ffe4d6 !important;
}
body.ycw-portal .ycw-modern-header .ycw-layout-option:focus-visible {
  outline: 2px solid #ff5900 !important;
  outline-offset: 1px !important;
}
/* In Balanced mode, keep the sidebar and header full-width, center only the page canvas. */
@media (min-width: 1051px) {
  html[data-ycw-layout='balanced'] body.ycw-portal:not(.template-login):not(.template-clientregister) > .wdes-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html[data-ycw-layout='balanced'] body.ycw-portal .wdes-sidebar > #main-menu {
    left: 0 !important;
    right: auto !important;
    border-radius: 0 !important;
  }
  html[data-ycw-layout='balanced'] body.ycw-portal .wdes-content > .ycw-content-layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }
  html[data-ycw-layout='balanced'] body.ycw-portal .wdes-content > .ycw-content-layout > section#main-body {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 28px clamp(20px, 3vw, 48px) 44px !important;
  }
  html[data-ycw-layout='balanced'] body.ycw-portal .wdes-content > .ycw-content-layout > section#main-body > .container,
  html[data-ycw-layout='balanced'] body.ycw-portal .wdes-content > .ycw-content-layout > section#main-body > .container-fluid {
    width: 100% !important;
    max-width: var(--ycw-balanced-width) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  html[data-ycw-layout='balanced'] body.ycw-portal[data-ycw-cart='true'] .wdes-content > .ycw-content-layout > section#main-body > .container,
  html[data-ycw-layout='balanced'] body.ycw-portal[data-ycw-cart='true'] .wdes-content > .ycw-content-layout > section#main-body > .container-fluid,
  html[data-ycw-layout='balanced'] body.ycw-portal:is(.template-domainregister,.template-domainrenewals,.template-configureproductdomain,.template-configureproduct,.template-viewcart,.template-clientareadomains) .wdes-content > .ycw-content-layout > section#main-body > .container,
  html[data-ycw-layout='balanced'] body.ycw-portal:is(.template-domainregister,.template-domainrenewals,.template-configureproductdomain,.template-configureproduct,.template-viewcart,.template-clientareadomains) .wdes-content > .ycw-content-layout > section#main-body > .container-fluid {
    max-width: var(--ycw-balanced-commerce-width) !important;
  }
  html[data-ycw-layout='balanced'] body.ycw-portal .wdes-content > section#header.ycw-modern-header,
  html[data-ycw-layout='balanced'] body.ycw-portal .wdes-content > section#header.ycw-modern-header > .ycw-topbar-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Balanced shares the Wide desktop context rail. The centered canvas flexes
   into the remaining space, so product and domain templates cannot overlap it.
   Tablet/mobile retain the existing off-canvas drawer at 1230px and below. */
@media (min-width: 1231px) {
  html[data-ycw-layout='balanced'] body.ycw-portal:not(.template-clientareahome)
    .wdes-content > .ycw-content-layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  html[data-ycw-layout='balanced'] body.ycw-portal:not(.template-clientareahome)
    .wdes-content > .ycw-content-layout > section#main-body {
    display: block !important;
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html[data-ycw-layout='balanced'] body.ycw-portal:not(.template-clientareahome)
    .wdes-content > .ycw-content-layout > aside.whm-sidebar {
    display: block !important;
    position: relative !important;
    flex: 0 0 var(--ycw-context) !important;
    width: var(--ycw-context) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
  html[data-ycw-layout='balanced'][data-ycw-context='hidden'] body.ycw-portal
    .wdes-content > .ycw-content-layout > aside.whm-sidebar {
    display: none !important;
  }
}

/* Keep familiar 16px mobile gutters and responsive order form behavior. */
@media (max-width: 1050px) {
  html[data-ycw-layout='balanced'] body.ycw-portal > .wdes-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}
@media (max-width: 420px) {
  body.ycw-portal .ycw-layout-choices { right: -45px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ycw-portal .ycw-layout-option { transition: none !important; }
}


/* YCW Portal 1.2.3 RC14 FIX | Header remains visible while scrolling.
   Consolidated into the last existing stylesheet, not an extra asset request.
   CSS only: no WHMCS form controls, templates, or navigation logic are touched. */
body.ycw-portal:not(.template-login):not(.template-clientregister)
  .wdes-content > section#header.ycw-modern-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1040 !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background-color: #fff !important;
  box-shadow: 0 2px 12px rgba(22, 39, 67, .06) !important;
}

/* Keep anchor targets and validation errors unobscured. */
html { scroll-padding-top: 78px; }
body.ycw-portal #main-body :target { scroll-margin-top: 78px; }

/* On phones and narrower tablets, the portal is already responsive.
   Hide only the layout picker, preserving a chosen desktop preference. */
@media (max-width: 820px) {
  body.ycw-portal .ycw-modern-header .ycw-layout-control,
  body.ycw-portal .ycw-modern-header #ycw-layout-toggle,
  body.ycw-portal .ycw-modern-header #ycw-layout-choices {
    display: none !important;
  }
  html { scroll-padding-top: 70px; }
  body.ycw-portal #main-body :target { scroll-margin-top: 70px; }
}