:root {
    --bg-color: #FEFBF0;
    --text-color: #111111;
    --border-color: #e5e7eb;
    --accent-color: #000000;
    --bread-color: #0F718F;

    --hero-heading: #ffffff;
    --hero-text: #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
}

/* ===== AUTH LAYOUT ===== */

.auth-page {
  /* fyller hela höjden under topbaren */
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;

  /* padding skalar med skärmstorlek */
  padding-top: calc(100vh / 12);
  padding-bottom: calc(100vh / 12);
  padding-left: calc(100vw / 20);
  padding-right: calc(100vw / 20);

  background-image: url("../Pricing/Pictures/Background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-card {
  /* kortet skalar med bredden men har min/max */
  width: clamp(320px, calc(100vw / 3.5), 520px);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 24px;

  /* padding skalar med vh/vw men har rimliga gränser */
  padding: clamp(20px, calc(100vh / 40), 32px)
           clamp(18px, calc(100vw / 50), 28px);

  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(8px);
}

.auth-title {
  /* 2560px → ~38–40px, laptop → ~26–30px, mobil → ~22px */
  font-size: clamp(22px, calc(100vw / 55), 40px);
  font-weight: 800;
  color: var(--bread-color);
  margin-bottom: 8px;
}

.auth-subtitle {
  /* 2560px → ~18px, laptop ~15–16px, mobil ~14px */
  font-size: clamp(14px, calc(100vw / 95), 18px);
  color: #4b5563;
  margin-bottom: calc(100vh / 40);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: calc(100vh / 60);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-label {
  font-size: clamp(13px, calc(100vw / 100), 16px);
  font-weight: 600;
  color: #111827;
}

.auth-input {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  padding: clamp(8px, calc(100vh / 90), 12px)
           clamp(12px, calc(100vw / 90), 16px);
  font-size: clamp(14px, calc(100vw / 95), 17px);
  outline: none;
}

.auth-input:focus {
  border-color: var(--bread-color);
  box-shadow: 0 0 0 2px rgba(15, 113, 143, 0.25);
}

.auth-extra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(12px, calc(100vw / 110), 14px);
  color: #4b5563;
  gap: 8px;
}

.auth-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.auth-checkbox-label input {
  width: 14px;
  height: 14px;
}

.auth-link {
  color: var(--bread-color);
  text-decoration: none;
  font-weight: 500;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-submit {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  border: none;
  padding: clamp(10px, calc(100vh / 80), 14px)
           clamp(16px, calc(100vw / 80), 20px);
  font-weight: 600;
  font-size: clamp(14px, calc(100vw / 95), 18px);
  cursor: pointer;
  background: #000000;
  color: #ffffff;
}

.auth-submit:hover {
  background: #111827;
}

.auth-footer-text {
  margin-top: calc(100vh / 45);
  font-size: clamp(13px, calc(100vw / 100), 16px);
  color: #4b5563;
  text-align: center;
}

/* ===== FOOTER ===== */
/* Den här krockar egentligen med main.css .site-footer,
   så du kan ta bort den helt om du använder samma footer överallt. */
.site-footer {
  background: #000000;
  color: #9ca3af;
  text-align: center;
  padding: 16px 12px 20px;
  font-size: 0.85rem;
}