/* assets/css/login.css */
/* Clean TVO Partner login – aligned footer buttons */

.loginGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 1rem;
}

@media (max-width: 980px) {
  .loginGrid {
    grid-template-columns: 1fr;
  }
}

.loginCard {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  display: flex;
  flex-direction: column;
  height: 100%;
}

.loginCardHeader {
  margin-bottom: 0.75rem;
}

.loginCardTitle {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.loginCardBody {
  flex: 1;
}

.loginCardFooter {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Text */
.loginIntro {
  margin: 0 0 1rem 0;
  opacity: 0.85;
  line-height: 1.5;
}

.loginText {
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
}

.loginMuted {
  font-size: 0.9rem;
  opacity: 0.75;
  line-height: 1.35;
}

.loginHelper {
  text-align: center;
  font-size: 12px;
  opacity: 0.85;
}

/* Fields */
.field {
  margin-bottom: 0.9rem;
}

.tvoLabel {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  opacity: 0.85;
}

/* Buttons */
.wide {
  width: 100%;
}

.loginCard .button,
.loginCard button.button,
.loginCard a.button {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Forgot link */
.forgot-link {
  font-size: 12px;
  color: #666;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.35);
  padding: 4px 0;
  display: inline-block;
}

.forgot-link:hover {
  color: inherit;
  border-bottom-style: solid;
}

/* Price hint */
.priceHint--card {
  font-size: 12px;
  color: #666;
  line-height: 1.25;
}

/* Demo creds */
.loginCard--demo .demoCreds {
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.02);
}

.demoRow {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}

.demoKey {
  opacity: 0.8;
  white-space: nowrap;
}

.demoVal {
  text-align: right;
  word-break: break-word;
}

/* Login footer: link under knap */
.loginCard--login .loginCardFooter {
  gap: 8px;
}

.loginCard--login .loginHelper {
  order: 2;
  /* efter knappen */
  margin-top: 2px;
}

.loginCard--login .button.wide {
  order: 1;
}

/* Ens footer-look: mindre padding og mere ro */
.loginCardFooter {
  padding-top: 12px;
  gap: 8px;
}

/* Gør linjen mere diskret */
.loginCardFooter {
  border-top-color: rgba(0, 0, 0, 0.05);
}

/* Opret firma: giv body en bedre balance */
.loginCard:not(.loginCard--login):not(.loginCard--demo) .loginCardBody {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
  /* justér 140-180 hvis du vil */
}

.loginCard--demo .demoCreds {
  padding: 0.65rem 0.8rem;
}

.loginCard--demo .demoRow {
  padding: 0.2rem 0;
}

/* --- Final polish: ens footer-start på desktop --- */
@media (min-width: 981px) {
  .loginCardBody {
    min-height: 210px;
    /* justér 210-260 til du rammer helt perfekt */
  }
}

/* Glemt-link: lidt mere diskret (mindre “tegnestreg”) */
.forgot-link {
  border-bottom: none;
  text-decoration: underline dotted rgba(0, 0, 0, 0.35);
  text-underline-offset: 3px;
}

.forgot-link:hover {
  text-decoration-style: solid;
}

/* Demo creds: lidt mindre “tung” */
.loginCard--demo .demoCreds {
  border-style: solid;
  /* mindre “skramlet” end dashed */
  border-color: rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.015);
}