.atc-ee-wrap {
  --atc-blue: #262262;
  --atc-red: #94111e;
  --atc-grey: #d1d3d4;
  --atc-border: #d9dde5;
  --atc-text: #202638;
  --atc-bg: #f5f7fb;
  font-family: inherit;
  color: var(--atc-text);
}

.atc-ee-card {
  max-width: 840px;
  margin: 28px auto;
  background: #fff;
  border: 1px solid #edf0f4;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(31, 41, 55, .08);
  overflow: hidden;
}

.atc-ee-card > h1 {
  margin: 0;
  padding: 30px 26px;
  text-align: center;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  border-bottom: 1px solid var(--atc-border);
}

.atc-ee-intro,
.atc-ee-section {
  padding: 26px 28px;
}

.atc-ee-intro {
  font-size: 14px;
  border-bottom: 1px solid var(--atc-border);
}

.atc-ee-intro p {
  margin: 0 0 10px;
}

.atc-ee-intro p:last-child {
  margin-bottom: 0;
}

.atc-ee-intro a {
  color: var(--atc-blue);
}

.atc-ee-section {
  border-bottom: 1px solid var(--atc-border);
}

.atc-ee-section h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
}

.atc-ee-divider {
  margin: 14px 0 24px;
  border-top: 1px solid var(--atc-border);
}

.atc-ee-label {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.atc-ee-label span {
  color: var(--atc-red);
}

.atc-ee-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 560px;
  margin-bottom: 24px;
}

.atc-ee-name-grid input,
.atc-ee-email {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd3df;
  border-radius: 4px;
  padding: 9px 11px;
  font: inherit;
  background: #fff;
  box-sizing: border-box;
}

.atc-ee-name-grid input:focus,
.atc-ee-email:focus {
  border-color: var(--atc-blue);
  outline: 2px solid rgba(38, 34, 98, .12);
  outline-offset: 0;
}

.atc-ee-name-grid small {
  display: block;
  margin-top: 5px;
  color: #7a8494;
  font-size: 12px;
}

.atc-ee-email {
  max-width: 360px;
}

.atc-ee-help {
  margin: -15px 0 18px;
  color: #7a8494;
  font-size: 13px;
  font-style: italic;
}

.atc-ee-courses {
  border-top: 1px solid var(--atc-border);
}

.atc-ee-course-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 17px 4px;
  border-bottom: 1px solid var(--atc-border);
  cursor: pointer;
  font-size: 15px;
}

.atc-ee-course-row:hover {
  background: #fafbfc;
}

.atc-ee-course-row input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.atc-ee-loading,
.atc-ee-empty {
  padding: 18px 4px;
  color: #667085;
}

.atc-ee-submit {
  display: block;
  min-width: 150px;
  margin: 28px auto;
  padding: 12px 24px;
  border: 0;
  border-radius: 5px;
  background: var(--atc-blue);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.atc-ee-submit:hover:not(:disabled) {
  opacity: .92;
}

.atc-ee-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.atc-ee-message {
  margin: 22px 28px 0;
  padding: 13px 15px;
  border-radius: 5px;
  font-size: 14px;
}

.atc-ee-error {
  background: #fff1f1;
  border: 1px solid #f1c2c2;
  color: #7f1d1d;
}

.atc-ee-success {
  background: #eef8f0;
  border: 1px solid #b8ddc0;
  color: #1f5f2c;
}

.atc-ee-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

@media (max-width: 640px) {
  .atc-ee-card {
    margin: 10px 0;
    border-radius: 6px;
  }
  .atc-ee-name-grid {
    grid-template-columns: 1fr;
  }
  .atc-ee-intro,
  .atc-ee-section {
    padding: 22px 18px;
  }
}

/* v0.2.0: authorisation gate and licence balances. Scoped to this plugin only. */
.atc-ee-wrap [hidden] { display: none !important; }
.atc-ee-wrap .atc-ee-auth-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.atc-ee-wrap .atc-ee-auth-input { max-width: 360px; width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #cbd3df; border-radius: 4px; background: #fff; box-sizing: border-box; }
.atc-ee-wrap .atc-ee-button { padding: 12px 20px; border: 0; border-radius: 5px; background: var(--atc-blue); color: #fff; cursor: pointer; }
.atc-ee-wrap .atc-ee-button:disabled { opacity: .55; cursor: not-allowed; }
.atc-ee-wrap .atc-ee-auth-message { font-size: 14px; color: #7f1d1d; margin: 14px 0 0; }
.atc-ee-wrap .atc-ee-session-bar { padding: 14px 28px; display: flex; gap: 16px; justify-content: space-between; align-items: center; background: #f5f7fb; border-bottom: 1px solid var(--atc-border); font-size: 14px; }
.atc-ee-wrap .atc-ee-text-button { color: var(--atc-blue); background: transparent; border: 0; border-radius: 0; box-shadow: none; text-transform: none; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 3px; }
.atc-ee-wrap .atc-ee-text-button:disabled { opacity: .5; cursor: not-allowed; }
.atc-ee-wrap .atc-ee-sublabel { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; text-transform: none; color: #667085; }
.atc-ee-wrap .atc-ee-course-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-transform: none; font-weight: 400; }
.atc-ee-wrap .atc-ee-course-name { text-transform: none; overflow-wrap: anywhere; }
.atc-ee-wrap .atc-ee-balance { justify-self: end; font-size: 12px; font-weight: 500; padding: 5px 9px; background: #eef1f8; border-radius: 4px; color: var(--atc-blue); white-space: nowrap; text-transform: none; }
.atc-ee-wrap .atc-ee-balance-empty { background: #fff1f1; border: 1px solid #f1c2c2; color: var(--atc-red); font-weight: 600; }
.atc-ee-wrap .atc-ee-balance-footer { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; margin-top: 14px; }
.atc-ee-wrap .atc-ee-balance-footer small { font-size: 12px; color: #667085; flex: 1; }
.atc-ee-wrap input[type="checkbox"]:focus-visible,
.atc-ee-wrap button:focus-visible { outline: 2px solid var(--atc-blue); outline-offset: 3px; }
@media (max-width: 640px) {
  .atc-ee-wrap .atc-ee-course-row { grid-template-columns: 18px minmax(0, 1fr); }
  .atc-ee-wrap .atc-ee-balance { grid-column: 2; justify-self: start; }
  .atc-ee-wrap .atc-ee-session-bar { padding: 14px 18px; }
  .atc-ee-wrap .atc-ee-balance-footer { flex-direction: column; gap: 8px; }
}