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

body {
  font-family: 'Poppins', 'Comic Sans MS', cursive, sans-serif;
  background-color: #fafaf8 !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
}

/* =====================
   Main content row
   ===================== */
.main-content {
  display: flex;
  flex: 1;
  height: auto;
  min-height: 85vh;
}

/* =====================
   Left — image side
   ===================== */
.image-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-width: 0;
}

.welcome-text {
  color: #306D29;
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 12px;
  text-align: center;
}

.welcome-image {
  max-width: 100%;
  max-height: 400px;
  height: auto;
  mix-blend-mode: multiply;
  filter: contrast(1) saturate(0.7) brightness(1.2);
}

/* =====================
   Right — form side
   ===================== */
.login-wrapper {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 24px 16px 8px !important;
  min-width: 0;
}

/* Mobile brand (hidden on desktop) */
.welcome-text-mobile {
  display: none !important;
  color: #306D29;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 10px;
  width: 100%;
}

/* =====================
   Card — override Bootstrap fully
   ===================== */
.login-container {
  background-color: #E7E1B1 !important;
  border: 2px solid #306D29 !important;
  border-radius: 16px !important;
  padding: clamp(14px, 2vw, 24px) clamp(16px, 2.5vw, 28px) !important;
  width: 90% !important;
  max-width: 500px !important;
  box-shadow: none !important;
  margin: 0 auto !important;
}

.login-container .logIn {
  color: #306D29 !important;
  font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: clamp(8px, 1.5vh, 14px) !important;
  letter-spacing: 2px;
}

/* =====================
   Form spacing
   ===================== */
.login-container .mb-3 {
  margin-bottom: clamp(5px, 1vh, 10px) !important;
}

.login-container .mb-4 {
  margin-bottom: clamp(5px, 1vh, 10px) !important;
}

/* =====================
   Inputs — override Bootstrap
   ===================== */
.login-container .form-control {
  width: 100% !important;
  padding: 6px 10px !important;
  font-size: clamp(0.75rem, 1.1vw, 0.85rem) !important;
  border: 1.5px solid #306D29 !important;
  border-radius: 6px !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #2c2c2c !important;
  font-family: inherit !important;
  outline: none !important;
  height: 34px !important;
  box-shadow: none !important;
}

.login-container .form-control::placeholder {
  color: #7a7455 !important;
  font-size: 0.85rem !important;
}

.login-container .form-control:focus {
  border-color: #245620 !important;
  box-shadow: 0 0 0 3px rgba(48, 109, 41, 0.15) !important;
  background-color: white !important;
  color: #2c2c2c !important;
}

/* =====================
   Submit button — override Bootstrap
   ===================== */
.login-btn {
  width: 100% !important;
  padding: 8px !important;
  background-color: #306D29 !important;
  color: #FBF5DD !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: clamp(0.8rem, 1.1vw, 0.9rem) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  margin-top: clamp(6px, 1vh, 12px) !important;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  text-align: center !important;
  display: block !important;
}

.login-btn:hover {
  background-color: #245620 !important;
  color: #FBF5DD !important;
}

/* =====================
   Divider row
   ===================== */
.login-container .mt-4 {
  margin-top: clamp(6px, 1vh, 10px) !important;
}

.divider {
  height: 1px !important;
  background-color: #306D29 !important;
  opacity: 1 !important;
}

.login-container .small,
.login-container .fw-semibold {
  font-size: clamp(0.68rem, 1vw, 0.78rem) !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
  white-space: nowrap;
}

.signup-btn {
  border: 1.5px solid #306D29 !important;
  background: transparent !important;
  color: #306D29 !important;
  border-radius: 5px !important;
  padding: 4px 12px !important;
  font-size: clamp(0.68rem, 1vw, 0.78rem) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.signup-btn:hover {
  background-color: #306D29 !important;
  color: #FBF5DD !important;
}

/* =====================
   Footer — pinned to bottom
   ===================== */
footer {
  background-color: #306D29 !important;
  color: #FBF5DD !important;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
}

.scrolling-text {
  display: inline-block !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  letter-spacing: 2px;
  animation: scroll-left 15s linear infinite;
  color: #FBF5DD !important;
}

@keyframes scroll-left {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-100%);
  }
}

/* =====================
   Responsive — mobile (≤700px)
   ===================== */
@media (max-width: 700px) {
  .image-container {
    display: none !important;
  }

  .login-wrapper {
    padding: 12px 16px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .welcome-text-mobile {
    display: block !important;
  }

  .login-container {
    padding: 16px !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* =====================
   Responsive — short screens (landscape / small height)
   ===================== */
@media (max-height: 650px) {
  .login-container .logIn {
    margin-bottom: 6px !important;
  }

  .login-container .mb-3,
  .login-container .mb-4 {
    margin-bottom: 4px !important;
  }

  .login-container .form-control {
    height: 30px !important;
    padding: 4px 8px !important;
  }

  .login-btn {
    padding: 6px !important;
    margin-top: 6px !important;
  }
}