:root {
  --swish-primary-color: #ffffff;
  --swish-input-shadow: #ffffff25;
  --swish-border-radius: 30px;
  --swish-box-shadow: 0 8px 40px -12px black;
  --swish-bg: url("../images/background.png") center / cover no-repeat;
}

/* Base Page Setup */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

#auth-page {
  min-height: 100vh;
  width: 100%;
  background: var(--swish-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: Raleway, sans-serif;
}

#auth-page .form-container {
  width: 100%;
  max-width: 400px;
  background: transparent;
  padding: 0;
}

#auth-page .form-box {
  width: 100%;
  height: auto;
}

#auth-page .sign-in {
  width: 100%;
}

/* Logo */
#auth-page .logo-image {
  max-height: 50px;
}

/* Inputs */
#auth-page .form-control {
  border: 1px solid transparent;
  background: rgba(24, 28, 50, 0.28);
  color: white;
  border-radius: var(--swish-border-radius) !important;
  font-size: .875rem;
  height: calc(1.5em + 1.25rem + 2px);
}

#auth-page .form-control:focus {
  border-color: white;
  box-shadow: 0 0 0.2rem var(--swish-input-shadow);
  background: rgba(24, 28, 50, 0.4);
}

#auth-page .form-control::placeholder {
  color: #f8f8f8;
  opacity: 0.7;
}

/* Buttons */
#auth-page .btn {
  border-radius: var(--swish-border-radius) !important;
  transition: transform 80ms ease-in;
  font-size: 16px;
  background-color: #1da1f2;
}

#auth-page .btn:hover {
  transform: translateY(-1px);
}

#auth-page .btn-outline-main {
  background-color: #4c787e;
  color: white;
  border: 1px solid white;
}

#auth-page .btn-outline-main:hover {
  background-color: white;
  color: black;
}

/* Utility classes */
#auth-page .box-rounded {
  border-radius: var(--swish-border-radius) !important;
}

#auth-page .box-shadow {
  box-shadow: var(--swish-box-shadow) !important;
}

/* --- Keep specific button styles only if you use them --- */
#auth-page .btn-facebook { background-color: #3b5999; color: #fff; border: none; }
#auth-page .btn-twitter { background-color: #1da1f2; color: #fff; border: none; }
#auth-page .btn-instagram { background-color: #e4405f; color: #fff; border: none; }

/* Mobile Adjustment */
@media (max-width: 767px) {
  #auth-page {
    padding: 15px;
  }
}