/* Notice bar */
.nb-text {
  padding-left: 68px;
}

#news a.pcwt-button.pcwt-icon_select-no.pcwt-size-large.pcwt-position-right {
  background-color: #141b38;
  border-color: #141b38;
  color: #fff;
}

/* Toggle button */
button.notice-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: #141b38;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 2;

  /* remove default button styles */
  appearance: none;
  -webkit-appearance: none;
}

/* Focus style for keyboard users */
button.notice-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Draw the icon (two strokes). Default is "+" (closed state). */
button.notice-toggle::before,
button.notice-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 20px;
  background: #fff;
  transform-origin: center;
  transition: 0.2s all;
}

/* Vertical stroke */
button.notice-toggle::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Horizontal stroke */
button.notice-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Open state becomes an "x" */
button.notice-toggle.notice-opened::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

button.notice-toggle.notice-opened::after {
  transform: translate(-50%, -50%) rotate(135deg);
}

/* Optional: slightly longer strokes when open */
button.notice-toggle.notice-opened::before,
button.notice-toggle.notice-opened::after {
  height: 24px;
}

/* Label (shown on hover/focus - desktop only below) */
button.notice-toggle .notice-toggle-label {
  position: absolute;
  right: 40px; /* sit to the left of the 40px button */
  top: 0;
  height: 40px;
  line-height: 40px;
  width: 120px;
  padding: 0 12px;
  text-align: center;

  background: #0a4f81;
  color: #fff;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: 0.2s all;

  pointer-events: none;
  z-index: 10;
}

/* Desktop: show label on hover + focus */
@media (min-width: 990px) {
  button.notice-toggle:hover .notice-toggle-label,
  button.notice-toggle:focus .notice-toggle-label,
  button.notice-toggle:focus-visible .notice-toggle-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Mobile: hide label (icon only) */
@media (max-width: 989px) {
  button.notice-toggle .notice-toggle-label {
    display: none;
  }
}