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

body {
  font-family: 'Poppins', 'Comic Sans MS', cursive, sans-serif;
  background-color: #fafaf8 !important;
  overflow: hidden;
}

/* =====================
   Page wrapper
   ===================== */
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
}

/* =====================
   Main content row
   ===================== */
.main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

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

.brand {
  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
   ===================== */
.form-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 24px 16px 8px;
  min-width: 0;
}

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

/* =====================
   Card
   ===================== */
.card-box {
  background-color: #E7E1B1;
  border: 2px solid #306D29;
  border-radius: 16px;
  padding: clamp(14px, 2vw, 24px) clamp(16px, 2.5vw, 28px);
  width: 100%;
  max-width: 500px;
}

.card-box h1 {
  color: #306D29;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: clamp(8px, 1.5vh, 14px);
}

/* =====================
   Form fields
   ===================== */
.field {
  margin-bottom: clamp(5px, 1vh, 10px);
}

.row-pair {
  display: flex;
  gap: 8px;
  margin-bottom: clamp(5px, 1vh, 10px);
}

.row-pair .field {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.field-label {
  display: block;
  font-size: clamp(0.68rem, 1vw, 0.77rem);
  color: #306D29;
  font-weight: 600;
  margin-bottom: 3px;
}

/* =====================
   Inputs & select
   ===================== */
.form-control,
.form-select {
  width: 100%;
  padding: 6px 10px;
  font-size: clamp(0.75rem, 1.1vw, 0.85rem);
  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;
  outline: none;
  height: 34px;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
}

.form-control::placeholder {
  color: #7a7455;
}

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

/* Custom dropdown arrow for select */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23306D29' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  padding-right: 28px;
  cursor: pointer;
}

.form-select option {
  color: #2c2c2c;
  background: #E7E1B1;
}

/* Placeholder colour for select */
.form-select.placeholder-active {
  color: #7a7455 !important;
}

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

.btn-submit:hover {
  background-color: #245620;
}

/* =====================
   Divider row
   ===================== */
.divider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(6px, 1vh, 10px);
}

.div-line {
  flex: 1;
  height: 1px;
  background-color: #306D29;
}

.div-text {
  font-size: clamp(0.68rem, 1vw, 0.78rem);
  font-weight: 600;
  color: #2c2c2c;
  white-space: nowrap;
}

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

.btn-login:hover {
  background-color: #306D29;
  color: #FBF5DD;
}

/* =====================
   Footer
   ===================== */
footer {
  background-color: #306D29;
  color: #FBF5DD;
  overflow: hidden;
  flex-shrink: 0;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
  animation: ticker 15s linear infinite;
}

@keyframes ticker {
  from {
    transform: translateX(100vw);
  }

  to {
    transform: translateX(-100%);
  }
}

/* =====================
   Responsive — mobile (≤700px width)
   ===================== */
@media (max-width: 700px) {
  .img-side {
    display: none;
  }

  .form-side {
    padding: 12px 16px;
  }

  .mobile-brand {
    display: block;
  }

  .card-box {
    padding: 16px;
  }
}

/* =====================
   Responsive — short screens (landscape / small height)
   ===================== */
@media (max-height: 650px) {
  .card-box h1 {
    margin-bottom: 6px;
  }

  .row-pair,
  .field {
    margin-bottom: 4px;
  }

  .form-control,
  .form-select {
    height: 30px;
    padding: 4px 8px;
  }

  .btn-submit {
    padding: 6px;
    margin-top: 6px;
  }
}