/*
 * ss-tpl-login-gate.css — SITE-OWNED. Calm login gate shown when a visitor without
 * an account reaches a feature that needs one (currently "Byg din egen tone",
 * see robots/skrivebord/js/sk-tone-byot-gate.js).
 *
 * Anchored inside its host panel rather than covering the page: the gate is a
 * quiet answer to one click, not a modal that seizes the screen — hence
 * aria-modal="false" on the element and no backdrop here.
 *
 * Values below are matched to the reference design: near-black title at 19px,
 * neutral-grey body at 16px, a borderless white card carrying only a soft shadow,
 * and two content-sized buttons (the green primary wider than the quiet dismiss)
 * rather than a stretched 50/50 pair.
 */
.ss-tpl-login-gate {
  position: absolute;
  z-index: 40;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(372px, calc(100% - 40px));
  box-sizing: border-box;
  padding: 26px 28px 28px;
  background: #ffffff;
  border: none;
  border-radius: 16px;
  /* Reference card reads as shadow-only — no hairline. Two layers: a tight
     contact shadow plus a wide soft one, so it lifts off the panel without a
     visible edge. */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 6px 28px rgba(0, 0, 0, 0.09);
  text-align: start;
}

.ss-tpl-login-gate__close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #b6b6b6;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.ss-tpl-login-gate__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #6a6a6a;
}

.ss-tpl-login-gate__title {
  /* padding-inline-end clears the close button (24px + its 14px offset). The
     reference lets the second title line run under the ×; keeping this gap costs
     nothing visually at this width and avoids the collision. */
  margin: 0 0 10px;
  padding-inline-end: 26px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: #2e2e2e;
}

.ss-tpl-login-gate__body {
  margin: 0 0 22px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #6a6a6a;
}

.ss-tpl-login-gate__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}

.ss-tpl-login-gate__login,
.ss-tpl-login-gate__dismiss {
  /* The pair FILLS the row, split roughly 1.7 : 1 — measured off the reference,
     where the green button is ~190px and the dismiss ~110px inside a ~316px
     content width. Proportional flex-grow reproduces that at any panel width,
     which a fixed px pair would not. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ss-tpl-login-gate__login {
  flex: 1.7 1 0;
  padding: 16px 20px;
  border: 1px solid transparent;
  background: #5f7d6e;
  color: #ffffff;
  font-weight: 700;
}
.ss-tpl-login-gate__login:hover {
  background: #547063;
  color: #ffffff;
}

.ss-tpl-login-gate__dismiss {
  flex: 1 1 0;
  padding: 16px 14px;
  border: 1px solid #e2e2e2;
  background: #ffffff;
  color: #3a3a3a;
  font-weight: 500;
}
.ss-tpl-login-gate__dismiss:hover {
  background: #f7f7f7;
  border-color: #d8d8d8;
}

/* Very narrow panels: even the 1.7:1 split gets tight, so let the labels keep
   their own width and wrap the pair if it truly cannot fit. */
@media (max-width: 380px) {
  .ss-tpl-login-gate__actions { gap: 10px; }
  .ss-tpl-login-gate__login,
  .ss-tpl-login-gate__dismiss { padding-inline: 12px; }
}

[data-theme="dark"] .ss-tpl-login-gate {
  background: rgb(38, 33, 29);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.20),
    0 6px 28px rgba(0, 0, 0, 0.34);
}
[data-theme="dark"] .ss-tpl-login-gate__title { color: #ede5de; }
[data-theme="dark"] .ss-tpl-login-gate__body { color: rgba(237, 229, 222, 0.66); }
[data-theme="dark"] .ss-tpl-login-gate__close { color: rgba(237, 229, 222, 0.55); }
[data-theme="dark"] .ss-tpl-login-gate__close:hover {
  background: rgba(237, 229, 222, 0.08);
  color: #ede5de;
}
[data-theme="dark"] .ss-tpl-login-gate__dismiss {
  border-color: rgba(237, 229, 222, 0.16);
  background: transparent;
  color: #ede5de;
}
[data-theme="dark"] .ss-tpl-login-gate__dismiss:hover {
  background: rgba(237, 229, 222, 0.06);
  border-color: rgba(237, 229, 222, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .ss-tpl-login-gate__close,
  .ss-tpl-login-gate__login,
  .ss-tpl-login-gate__dismiss { transition: none; }
}