:root {
  --ink: #1b1b1b;
  --muted: #4b4b4b;

  --surface: rgba(255, 248, 230, 0.94);
  --surface-2: rgba(255, 244, 210, 0.92);
  --border: rgba(60, 40, 18, 0.25);

  --green: #00a651;
  --green-2: #008a42;
  --orange: #fdb913;
  --red: #cf2a7b;

  --shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  --radius: 1.5rem;

  --bg-image: url("assets/bg-farm.jpg");

  --font-en: "Galindo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-km: "Galindo", "Kantumruy Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: #0b0f14;
  font-family: var(--font-en);
}

.page {
  min-height: 100%;
  position: relative;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Vertical overlay (top -> bottom) */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.7) 100%);
  backdrop-filter: blur(2px);
}

.wrap {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 48px 0;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(0);
  /* keep flat, no glass effect */
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 5px;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}

.logo-smart {
  background: #00a651;
  border-color: #00a651;
}

.brand-text {
  display: grid;
  gap: 2px;
}

.brand-text .small {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  letter-spacing: 0.3px;
}

.lang-toggle {
  display: flex;
  gap: 8px;
}

.lang-btn {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  padding: 6px 8px;
  border-radius: 0.5rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.flag-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* Hero */
.hero {
  margin-top: 18px;
  display: grid;
  gap: 18px;
}

.hero-title {
  color: #fff;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  letter-spacing: 1px;
  line-height: 1.02;
  text-align: center;
  margin-top: 80px;
  animation: fade-in-up 0.8s ease-out;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce-slight {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes wood-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes alert-jump {
  0%,
  100% {
    transform: rotate(10deg) translateY(0);
  }

  10% {
    transform: rotate(10deg) translateY(-6px);
  }

  20% {
    transform: rotate(10deg) translateY(0);
  }

  30% {
    transform: rotate(10deg) translateY(-6px);
  }

  40% {
    transform: rotate(10deg) translateY(0);
  }
}

.hero-sub {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.55;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  max-width: 65ch;
  margin-inline: auto;
  margin-bottom: 40px;
}

/* Flat surface panels */
/* OPTION: Glassmorphism */
.panel {
  background: rgba(255, 255, 255, 0.15);
  /* More transparent */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: #fff;
  /* White text looks better on dark/glass usually, but we have dark text vars. Let's see. */

  border-radius: var(--radius);
  padding: 18px;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

/* Fix text contrast inside glass panel if needed, typically glass on dark bg needs light text, 
   but our variables use dark ink. Let's force a slightly darker glass or rely on the background image. 
   If the BG is bright, we need dark text. If BG is dark, we need light text.
   The body background is dark (#0b0f14) but has a bg-image. 
   Let's stick to the dark text for now but perhaps make the glass slightly more white/opaque 
   to ensure readability. */

.panel {
  background: rgba(255, 255, 255, 0.65);
  /* Frosted white */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);

  border-radius: var(--radius);
  padding: 18px;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.panel h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

.panel-alert {
  /* background: #fff4e6; */
  border: 4px solid #ffffff;
  /* Thicker solid border for alert impact */
  border-style: dashed;
  position: relative;
}

.panel-alert::before {
  content: "!";
  position: absolute;
  top: -15px;
  right: -10px;
  width: 36px;
  height: 36px;
  background: #e85b47;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 22px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: rotate(10deg);
  animation: alert-jump 3s ease-in-out infinite;
}

.panel-alert h2 {
  color: #c05621;
}

.grid-2 {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bullets {
  margin: 10px 0 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}

.badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-top: 10px;
  color: #1b1b1b;
}

.badge .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 177, 61, 0.25);
}

/* Components */
.btn {
  border: 0;
  border-radius: 0.7rem;
  padding: 14px 16px;
  font-weight: 950;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0.3px;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--green), var(--green-2));
  box-shadow: 0 14px 28px rgba(31, 111, 58, 0.35);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Custom Farm Action Button */
.btn-farm-action-animate {
  width: 100%;
  max-width: 400px;
  margin: 24px auto 0 auto;
  font-size: 20px;
  color: #fff;
  /* Dark wood color text */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #00d666, #00a651);
  border: 4px solid #fff;
  border-radius: 20px;
  /* box-shadow removed as requested */
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: fade-in-up 1s ease-out 0.2s backwards, bounce-slight 3s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-farm-action {
  width: 100%;
  max-width: 400px;
  margin: 24px auto 0 auto;
  font-size: 20px;
  color: #fff;
  /* Dark wood color text */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #00d666, #00a651);
  border: 4px solid #fff;
  border-radius: 20px;
  /* box-shadow removed as requested */
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-farm-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}

.btn-farm-action:hover {
  transform: scale(1.03) translateY(-2px);
  filter: brightness(1.1);
}

.btn-farm-action:active {
  transform: scale(0.98);
}

.form {
  display: grid;
  gap: 12px;
}

.label {
  font-weight: 900;
  font-size: 12px;
  color: #2f2a22;
  margin-bottom: 10px;
}

.input,
.select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 0.6rem;
  border: 1px solid rgba(70, 50, 25, 0.22);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  outline: none;
  font-size: 14px;
}

.input:focus,
.select:focus {
  border-color: rgba(47, 143, 78, 0.65);
  box-shadow: 0 0 0 4px rgba(47, 143, 78, 0.12);
}

.help {
  font-size: 12px;
  color: rgba(75, 75, 75, 0.92);
}

/* Select custom arrow (inset) */
.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' fill='none' stroke='%234b4b4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

.select::-ms-expand {
  display: none;
}

/* Phone group fits without overflow */
.phone-group {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.phone-group > * {
  min-width: 0;
}

.phone-group .select {
  flex: 0 0 110px;
  width: 110px;
  max-width: 110px;
}

.phone-group .input {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 420px) {
  .phone-group {
    flex-direction: column;
  }

  .phone-group .select {
    width: 100%;
    max-width: 100%;
  }
}

.notice {
  border-radius: 0.6rem;
  padding: 12px 16px 12px 46px;
  /* Space for icon */
  border: 1px solid rgba(70, 50, 25, 0.25);
  background: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  color: #1b1b1b;
  position: relative;
  line-height: 1.5;
  margin-bottom: 10px;
}

.notice::before {
  content: "i";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 24px;
  height: 24px;
  background: #ccc;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-family: serif;
  /* For the 'i' */
  font-style: normal;
}

.notice.ok {
  border-color: var(--green);
  background: #e8fbf0;
  color: #005c2b;
}

.notice.ok::before {
  content: "✓";
  /* Checkmark */
  background: var(--green);
  font-family: sans-serif;
}

.notice.err {
  border-color: var(--red);
  background: #fff0f6;
  color: #90104b;
}

.notice.err::before {
  content: "!";
  background: var(--red);
  font-family: sans-serif;
}

.footer-note {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  text-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
  text-align: center;
}

/* Language font switching */
body.lang-km {
  font-family: var(--font-km);
}

body.lang-km .hero-title {
  font-family: var(--font-km);
  letter-spacing: 0.2px;
}

body.lang-km .btn-farm-action,
body.lang-km .btn-farm-action-animate,
body.lang-km .btn-secondary,
body.lang-km .btn-ghost,
body.lang-km .btn {
  font-family: var(--font-km);
}

/* Secondary button for light panels (fix invisible ghost button on surface) */
.btn-secondary {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(70, 50, 25, 0.22);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.btn-secondary:active {
  transform: translateY(1px);
}

.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* OTP digit boxes (5 digits) */
.otp-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.otp-box {
  width: 52px;
  height: 56px;
  border-radius: 0.6rem;
  border: 1px solid rgba(70, 50, 25, 0.22);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.otp-box:focus {
  border-color: rgba(47, 143, 78, 0.65);
  box-shadow: 0 0 0 4px rgba(47, 143, 78, 0.12);
}

@media (max-width: 420px) {
  .otp-row {
    gap: 8px;
  }

  .otp-box {
    width: 44px;
    height: 52px;
    font-size: 20px;
  }
}

/* Countdown pill */
.countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(70, 50, 25, 0.22);
  background: #00a651;
}

/* Timeline Steps */
.timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: -20px;
  margin-bottom: 30px;
}

.t-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  position: relative;
  transition: all 0.3s ease;
}

.t-step.active {
  background: var(--orange);
  border-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.t-step.done {
  background: var(--green);
  border-color: #fff;
  color: rgba(255, 255, 255, 0.9);
}

.t-line {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.t-line.fill {
  background: white;
}

@media (max-width: 400px) {
  .t-line {
    width: 24px;
  }
}