/*
 * Customer portal shell — shared layout for desktop header/footer.
 * Table-based columns keep sidebar + content aligned even if CSS fails to load.
 */
:root {
  --portal-sidebar-min: 240px;
  --portal-sidebar-max: 272px;
  --portal-sidebar-width: clamp(var(--portal-sidebar-min), 15vw, var(--portal-sidebar-max));
  --portal-shell-max: 1600px;
  --portal-gutter: 16px;
}

/* No teal side gutters when the shell is already full-width (no background sidebars). */
@media (max-width: 1600px) {
  :root {
    --portal-gutter: 0px;
  }
}

.portal-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--portal-shell-max);
  margin: 0 auto;
  padding: 0 var(--portal-gutter);
}

.portal-layout-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #FFFFFF;
  border-left: 1px solid #BBBBBB;
  border-right: 1px solid #BBBBBB;
}

td.portal-sidebar {
  width: var(--portal-sidebar-width);
  vertical-align: top;
  box-sizing: border-box;
  background-color: #E8E8F4;
  border-right: 1px solid #BBBBBB;
  padding: 5px;
}

td.portal-main {
  vertical-align: top;
  box-sizing: border-box;
  width: auto;
  padding: 15px 10px;
  background: #FFFFFF;
}

.portal-nav-wrap {
  text-align: center;
}

.portal-nav-inner {
  box-sizing: border-box;
  display: inline-block;
  max-width: var(--portal-shell-max);
  width: auto;
  margin: 0 auto;
  padding: 0 var(--portal-gutter);
  text-align: center;
}

.portal-nav-menu {
  display: inline-block;
  margin: 2px;
  text-align: left;
}

.portal-nav-inner #navbar {
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

.portal-nav-inner::after {
  content: "";
  display: table;
  clear: both;
}

.portal-sidebar #cartcontents {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.portal-sidebar-footer {
  padding-top: 1rem;
}

/* Sidebar nav — section headers, links, chevrons */
.portal-sidebar .menusection {
  font-family: "Plus Jakarta Sans", "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 11pt;
  color: #000000;
}

.portal-sidebar img[src*="arrow-red.gif"] {
  display: none;
}

.portal-sidebar a.menu {
  display: inline;
  color: #4a74bc;
  text-decoration: none;
  background-color: transparent;
}

.portal-sidebar a.menu::before {
  content: "›";
  display: inline-block;
  margin-right: 0.35em;
  color: #225087;
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1;
}

.portal-sidebar a.menu:hover,
.portal-sidebar a.menu:focus,
.portal-sidebar a.menu:hover .menuitem,
.portal-sidebar a.menu:focus .menuitem {
  color: #225087;
  text-decoration: none;
}

.portal-sidebar .menuitem {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: inherit;
  background-color: transparent;
}

.portal-sidebar .menuitem-account {
  font-weight: 600;
  color: #225087;
}

.portal-sidebar a.menu:hover .menuitem-account,
.portal-sidebar a.menu:focus .menuitem-account {
  color: #225087;
}

.portal-sidebar .menuinfo {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 8pt;
  color: #64748b;
  background-color: transparent;
}

.portal-sidebar .menuitemsub {
  color: #225087;
  background-color: transparent;
}

.portal-sidebar .portal-sidebar-subnav {
  margin: 0.15rem 0 0.35rem;
  padding-left: 0.85rem;
  list-style: none;
}

.portal-sidebar .portal-sidebar-subnav li {
  margin: 0.15rem 0;
}

.portal-sidebar .portal-sidebar-subnav a.menu::before {
  content: none;
  margin: 0;
}

/* Legacy blocks stay their authored width; just prevent overflow in main column. */
.portal-main .pageboxheader,
.portal-main .pageboxtable,
.portal-main .pageboxcontainer {
  max-width: 100%;
}

.portal-main table {
  max-width: 100%;
}

.portal-main input[type="text"],
.portal-main input[type="email"],
.portal-main input[type="password"],
.portal-main select,
.portal-main textarea {
  max-width: 100%;
}

/* Shown while Order.php builds the item list (keeps main column from collapsing). */
.order-form-loading {
  padding: 2rem 1rem;
  font-family: "Plus Jakarta Sans", "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #225087;
}

@media (max-width: 768px) {
  .mobile-cart-container {
    display: block;
  }
}