.eur-magic-links,
.eur-magic-links * {
  box-sizing: border-box;
}

.eur-magic-links {
  --eur-magic-text: var(--eur-design-text, #0e2a3a);
  --eur-magic-copy: var(--eur-design-copy, #405562);
  --eur-magic-subtle: var(--eur-design-subtle, #617784);
  --eur-magic-line: var(--eur-design-border, #d7e4ea);
  --eur-magic-line-strong: var(--eur-design-border-strong, #adcad5);
  --eur-magic-surface: var(--eur-design-surface, #fff);
  --eur-magic-soft: var(--eur-design-soft-bg, #eef7fa);
  --eur-magic-accent: var(--eur-design-brand, #00add9);
  color: var(--eur-magic-copy);
}

.eur-magic-links__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--eur-magic-line);
}

.eur-magic-links__heading h2,
.eur-magic-links__active-title {
  margin: 0;
  color: var(--eur-magic-text);
  font-weight: 650;
  letter-spacing: -.02em;
}

.eur-magic-links__heading h2 {
  font-size: 20px;
  line-height: 1.25;
}

.eur-magic-links__heading p {
  max-width: 700px;
  margin: 7px 0 0;
  color: var(--eur-magic-copy);
}

.eur-magic-links--account {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--eur-magic-line);
  border-radius: 10px;
  background: var(--eur-magic-surface);
}

.eur-magic-links--admin {
  max-width: 880px;
  margin: 28px 0 18px;
  padding: 24px;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background: #fff;
}

.eur-magic-links--admin .eur-magic-links__heading h2,
.eur-magic-links--admin .eur-magic-links__active-title {
  color: #1d2327;
}

.eur-magic-links__generator {
  display: grid;
  grid-template-columns: minmax(190px, 320px) max-content;
  align-items: end;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.eur-magic-links__generator label {
  grid-column: 1 / -1;
  color: var(--eur-magic-text);
  font-weight: 600;
}

.eur-magic-links--admin .eur-magic-links__generator label {
  color: #1d2327;
}

.eur-magic-links__generator select {
  width: 100%;
  min-height: 40px;
}

.eur-magic-links__generator .button {
  min-height: 40px;
  padding-inline: 18px;
}

.eur-magic-links__privacy {
  margin: 8px 0 24px !important;
}

.eur-magic-links__active-title {
  margin-bottom: 8px;
  font-size: 16px;
}

.eur-magic-links__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eur-magic-links__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--eur-magic-line);
}

.eur-magic-links__details {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.eur-magic-links__details strong {
  color: var(--eur-magic-text);
  font-size: 15px;
  font-weight: 650;
}

.eur-magic-links__details span {
  color: var(--eur-magic-subtle);
  font-size: 13px;
}

.eur-magic-links__revoke-form {
  flex: 0 0 auto;
  margin: 0;
}

.eurekers-account-v2 .eur-magic-links__revoke-form {
  width: auto !important;
}

.eur-magic-links__revoke {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #b32d2e;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #b32d2e;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.eur-magic-links__revoke:hover,
.eur-magic-links__revoke:focus {
  border-color: #8a2424;
  background: rgba(179, 45, 46, .08);
  color: #8a2424;
}

.eur-magic-links :is(button, select, input, a):focus-visible {
  outline: 2px solid var(--eur-magic-accent);
  outline-offset: 3px;
}

.eur-magic-links__empty {
  margin: 0;
  padding: 16px 0 2px;
  color: var(--eur-magic-subtle);
}

.eur-magic-links__notice {
  margin: 0 0 18px !important;
  padding: 12px 14px;
  border-radius: 8px;
}

.eur-magic-links__notice--success {
  background: #e9f6ee;
  color: #237642;
}

.eur-magic-links__notice--error {
  background: #fff1e6;
  color: #9a4f14;
}

.eur-magic-links__external-form {
  display: none;
}

.eur-magic-links--result {
  max-width: 780px;
  margin: 36px auto;
  padding: 0 24px;
}

.eur-magic-result-page {
  margin: 0;
  background: #f0f0f1;
  color: #3c434a;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.eur-magic-links--result > h1 {
  margin-bottom: 12px;
}

.eur-magic-links__copy,
.eur-magic-links__share-warning {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--eur-magic-line-strong);
  border-radius: 6px;
  background: var(--eur-magic-surface);
}

.eur-magic-links__copy label,
.eur-magic-links__share-warning strong {
  display: block;
  margin-bottom: 8px;
  color: var(--eur-magic-text);
  font-weight: 600;
}

.eur-magic-links__copy > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.eur-magic-links__copy input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--eur-magic-line-strong);
  border-radius: 4px;
  background: var(--eur-magic-surface);
  color: var(--eur-magic-text);
}

.eur-magic-links__copy-status,
.eur-magic-links__share-warning p {
  margin: 8px 0 0;
}

.eur-magic-links__copy-status {
  min-height: 1.5em;
  color: #2271b1;
  font-weight: 600;
}

.eur-magic-links--result .button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid #2271b1;
  border-radius: 4px;
  background: #fff;
  color: #2271b1;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.eur-magic-links--result .button-primary {
  background: #2271b1;
  color: #fff;
}

.eur-magic-links--result .button:hover,
.eur-magic-links--result .button:focus {
  border-color: #135e96;
  background: #f0f6fc;
  color: #135e96;
}

.eur-magic-links--result .button-primary:hover,
.eur-magic-links--result .button-primary:focus {
  background: #135e96;
  color: #fff;
}

.eur-magic-links__share-warning {
  border-color: #dba617;
  background: #fff8e5;
}

.eur-magic-links__result-actions {
  margin-top: 24px;
}

html[data-eurekers-theme=dark] .eur-magic-links__notice--success {
  background: #173c2b;
  color: #9ce9bb;
}

html[data-eurekers-theme=dark] .eur-magic-links__notice--error {
  background: #43291c;
  color: #ffc697;
}

html[data-eurekers-theme=dark] .eur-magic-links__revoke {
  border-color: #ff9b9b;
  color: #ffb0b0;
}

html[data-eurekers-theme=dark] .eur-magic-links__revoke:hover,
html[data-eurekers-theme=dark] .eur-magic-links__revoke:focus {
  background: rgba(255, 155, 155, .1);
  color: #ffd0d0;
}

html[data-eurekers-theme=dark] body.eur-magic-result-page {
  background: var(--eur-design-page-bg);
  color: var(--eur-design-copy);
}

html[data-eurekers-theme=dark] .eur-magic-links__share-warning {
  border-color: #b78929;
  background: #362f20;
}

@media (max-width: 720px) {
  .eur-magic-links--account,
  .eur-magic-links--admin {
    padding: 20px 16px;
  }

  .eur-magic-links__generator,
  .eur-magic-links__copy > div {
    grid-template-columns: 1fr;
  }

  .eur-magic-links__generator .button,
  .eur-magic-links__copy .button {
    width: 100%;
    justify-content: center;
  }

  .eur-magic-links__item {
    align-items: flex-start;
    gap: 14px;
  }
}

@media (max-width: 460px) {
  .eur-magic-links__item {
    display: grid;
  }

  .eur-magic-links__revoke,
  .eur-magic-links__revoke-form {
    width: 100%;
  }

  .eurekers-account-v2 .eur-magic-links__revoke-form {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eur-magic-links *,
  .eur-magic-links *::before,
  .eur-magic-links *::after {
    transition: none !important;
  }
}