/* Support hours (module: Client area > Support hours), in the Workspace sidebar and on the Contact page.
 * Sidebar: a card like the other sidebar cards (same frame and heading). Inside: the open or closed pill with a live dot,
 * the hours in a tinted tile with a clock, the next opening time when closed, and the message.
 * Contact page: one slim strip: heading on the left, the hours centred, the label and message on the right. */

/* Sidebar card body. */
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours{display:grid;gap:12px;justify-items:stretch;color:#355873}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__state{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:999px;border:1px solid #c9ead6;background:linear-gradient(135deg,#f1fbf5,#e3f6ea);color:#17794a;font-size:11px;font-weight:750;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__state::before{content:"";width:7px;height:7px;border-radius:50%;background:#22a05f;box-shadow:0 0 0 3px #22a05f26;animation:nbp-hours-live 2.4s ease-in-out infinite}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours--closed .nbp-hours__state{border-color:#e4e1ea;background:linear-gradient(135deg,#faf9fc,#f1eff5);color:#5d5670}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours--closed .nbp-hours__state::before{background:#9a93ab;box-shadow:0 0 0 3px #9a93ab26;animation:none}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__when{position:relative;display:grid;gap:3px;padding:12px 14px 12px 50px;border:1px solid #dfeaf1;border-radius:14px;background:linear-gradient(135deg,#f9fcfe,#eef6fa);box-shadow:inset 0 1px 0 #fff}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__when::before{content:"";position:absolute;left:12px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:9px;background:#fff;border:1px solid #d8e6ee;box-shadow:0 2px 6px #17476b14}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__when::after{content:"";position:absolute;left:19px;top:50%;width:14px;height:14px;margin-top:-7px;background:#4f94aa;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__time{font-size:14px;font-weight:700;line-height:1.35;color:#17354b}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__zone{display:block;font-size:11.5px;color:#7891a5;opacity:1}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__next{font-size:12px;font-weight:650;color:#59758b}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__note{margin:0;font-size:13px;line-height:1.55;color:#59758b;opacity:1}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__greeting{font-weight:700;color:#17354b}
/* Week card (Panel: Support hours > Show the week on click): the card may drop past the sidebar card's edge, and the
   open card sits above the cards below it. The hours tile becomes the button, with room for its chevron. */
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nw-sidebar-panel[menuItemName="nbp-support-hours"],
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nw-sidebar-panel[menuItemName="nbp-support-hours"] :is(.collapsable-card-body,.card-body){overflow:visible!important}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nw-sidebar-panel[menuItemName="nbp-support-hours"]:has(.nbp-week.is-open){position:relative;z-index:30}
/* With the card no longer clipping, its body keeps the card's rounded bottom corners itself. */
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nw-sidebar-panel[menuItemName="nbp-support-hours"] > :is(.collapsable-card-body,.card-body):last-child,
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nw-sidebar-panel[menuItemName="nbp-support-hours"] > .collapsable-card-body > .card-body:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nw-sidebar-panel[menuItemName="nbp-support-hours"] > .collapsable-card-body{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__when--toggle{padding-right:36px}
/* The hours stay on one line: a slightly smaller size, tighter side spacing, never wrapping. */
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__when{padding-left:46px;padding-right:28px}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__when::before{left:10px}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__when::after{left:17px}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__when{container-type:inline-size}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__time{font-size:13px;font-size:clamp(11px,calc(100cqw / 15),13.5px);letter-spacing:-.01em;white-space:nowrap}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__more{right:11px}
/* The week card lines up with the hours tile and never runs past the sidebar: same left and right edges, rows wrap. */
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-week{left:0;right:0;width:auto;max-width:none}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-week__copy{padding:14px 12px 14px}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-week__day{padding:7px 9px;gap:8px}
html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-week__hours{font-size:11.5px}
@keyframes nbp-hours-live{0%,100%{box-shadow:0 0 0 3px #22a05f26}50%{box-shadow:0 0 0 5px #22a05f10}}
@media(prefers-reduced-motion:reduce){html body.nab-workspace #nw-sidebar #nw-sidebar-context .nbp-hours__state::before{animation:none}}

/* Contact page strip; the sidebar copy is not shown on this page. */
html body.nab-workspace #nab-contact-page .nbp-hours-strip{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:24px;row-gap:6px;
  margin:0;padding:18px var(--nbp-hours-strip-pad,24px);background:#f8fbfd;border:1px solid #e0e9f1;border-radius:16px}
html body.nab-workspace #nab-contact-page .nbp-hours-strip__label{grid-column:1;margin:0;font-size:13px;font-weight:750;letter-spacing:-.01em;color:#234d70}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours{display:contents}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__when{grid-column:2;justify-self:center;justify-content:center;text-align:center;font-size:14px;color:#17354b}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__next{grid-column:2;justify-self:center;font-size:12px;color:#59758b}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__status{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:10px;min-width:0}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__state{order:0;flex:none}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__note{font-size:12.5px;line-height:1.5;color:#59758b;opacity:1}
/* Contact page strip with the week card on (its own design, not the sidebar card): the hours stay plain centred text
   with a small chevron and a soft tint on hover; the week opens as a full-width panel under the strip: a live clock
   on the left and the seven days as tiles in one row (stacked on phones). The strip sits above the sections below. */
html body.nab-workspace #nab-contact-page .nbp-hours-strip{position:relative}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__slot{display:contents}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__when--toggle{grid-column:2;grid-row:1;justify-self:center}
/* Label and status take their natural width (the message stays on one line); the hours sit centred between them. */
html body.nab-workspace #nab-contact-page .nbp-hours-strip{grid-template-columns:max-content minmax(0,1fr) max-content}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__note{white-space:nowrap}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__when--toggle{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 8px;width:auto;margin:0;padding:6px 32px 6px 12px;border:1px solid transparent!important;border-radius:12px;background:transparent!important;box-shadow:none!important;font-size:14px;color:#17354b;text-align:center;-webkit-appearance:none;appearance:none}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__when--toggle:hover,html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__when--toggle[aria-expanded=true]{background:#f1f8fb!important;border-color:#dbeaf1!important}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__time{font-weight:700;white-space:nowrap}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__zone{font-size:12px;color:#7891a5}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__more{right:12px}
/* The week opens inside the strip as a full-width row under it (pushing the page down), so nothing below can cover it. */
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week{position:relative;left:auto;right:auto;top:auto;grid-column:1/-1;grid-row:2;width:auto;max-width:none;margin-top:12px;text-align:left;transform:translateY(-6px);transform-origin:50% 0}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week.is-open{transform:none}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__arrow{display:none}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__card{display:grid;grid-template-columns:170px minmax(0,1fr);border-radius:18px}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__scene{height:auto;min-height:150px}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__clock{top:50%;margin-top:-25px}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__copy{padding:18px 20px 20px}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__copy h3{display:inline;margin-right:10px}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__copy p{display:inline;margin:0}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__list{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:14px}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__day{flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:12px 6px;border:1px solid #e3eef4;border-radius:14px;background:#fff;text-align:center}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__day--today{border-color:#9fd0dd;background:linear-gradient(160deg,#f2fafc,#e6f4f8);box-shadow:0 6px 16px #17476b14}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__name{justify-items:center}
html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__hours{white-space:normal;text-align:center;font-size:11.5px;line-height:1.35}
@media(max-width:1100px){
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__note{white-space:normal}
}
@media(max-width:820px){
  html body.nab-workspace #nab-contact-page .nbp-hours-strip{grid-template-columns:1fr}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__when--toggle{grid-column:1;grid-row:auto;justify-self:start}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week{grid-row:auto}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__when--toggle{justify-content:flex-start;text-align:left;padding-left:0}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__card{grid-template-columns:1fr}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__scene{min-height:78px}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__arrow{left:34px;margin-left:0}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__list{grid-template-columns:1fr;gap:4px}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__day{flex-direction:row;justify-content:space-between;padding:8px 10px;text-align:left}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-week__name{justify-items:start}
}
html body.nab-workspace:has(#nab-contact-page .nbp-hours-strip) #nw-sidebar #nw-sidebar-context .nw-sidebar-panel[menuItemName="nbp-support-hours"]{display:none!important}
@media(max-width:820px){
  html body.nab-workspace #nab-contact-page .nbp-hours-strip{grid-template-columns:1fr;justify-items:start;row-gap:10px}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip :is(.nbp-hours-strip__label,.nbp-hours__when,.nbp-hours__next,.nbp-hours__status){grid-column:1;grid-row:auto;justify-self:start;justify-content:flex-start;text-align:left}
  html body.nab-workspace #nab-contact-page .nbp-hours-strip .nbp-hours__status{align-items:flex-start}
}