/*
 * The banner from notice.js. Pinned to the top of the viewport rather than placed in the document,
 * because the message it carries is one a learner meets at the top of a page they are about to
 * scroll away from — the position is the whole point of the component.
 */
.ielts-notice {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  box-sizing: border-box;
  padding: 14px 52px 14px 20px;
  background: #ba1a1a;
  color: #fff;
  font: 15px/1.5 Inter, Arial, sans-serif;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.ielts-notice[hidden] { display: none; }
.ielts-notice p { margin: 0; flex: 1 1 320px; }

/* The address, and the button that carries it away. Monospace so 0/O and 1/l are told apart by
   anyone reading it aloud to an admin over the phone. */
.ielts-notice-copy {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .16);
  max-width: 100%;
}
.ielts-notice-copy code {
  /* Takes the row. Without this the address keeps its natural width and the rest of the row is a
     block of empty red beside the button, which reads as a rendering fault on a phone. */
  flex: 1 1 auto;
  padding: 8px 12px;
  font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  /* An address is long and a phone is narrow: wrap it rather than pushing the button off-screen. */
  overflow-wrap: anywhere;
  user-select: all;
}
.ielts-notice-copy button {
  flex: none;
  padding: 8px 14px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .92);
  color: #ba1a1a;
  font: 600 14px Inter, Arial, sans-serif;
  cursor: pointer;
}
.ielts-notice-copy button:hover { background: #fff; }

.ielts-notice-action {
  flex: none;
  padding: 9px 16px;
  border-radius: 8px;
  background: #ffc928;
  color: #231b00;
  font-weight: 700;
  text-decoration: none;
}
.ielts-notice-action:hover { background: #ffd75a; }

.ielts-notice-close {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.ielts-notice-close:hover { opacity: 1; }

@media (max-width: 560px) {
  .ielts-notice { font-size: 14px; padding: 12px 44px 12px 14px; }
  .ielts-notice-copy { width: 100%; }
}