/* ===========================================================
   LVNG — Ayodhya Landing Page
   Base styles + interactive states.
   Layout is kept inline in index.html (ported from the design)
   for visual fidelity; this file owns reset, fonts, and the
   hover/focus states that inline styles cannot express.
   =========================================================== */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #F2EFEA;
  color: #111111;
}

.page { width: 100%; overflow-x: hidden; background: #F2EFEA; }

img { display: block; max-width: 100%; }

input, select, button, textarea { font-family: inherit; }

select {
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
}

::placeholder { color: #a39c92; }

a { color: inherit; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Buttons ---------- */
.btn-gold {
  background: #C8A96A;
  color: #111;
  cursor: pointer;
  transition: background .18s ease;
}
.btn-gold:hover { background: #d6ba80; }

.btn-dark {
  background: #111;
  color: #fff;
  cursor: pointer;
  transition: background .18s ease;
}
.btn-dark:hover { background: #2a2a2a; }

/* Hero header pill (transparent base, lightens on hover) */
.btn-wa-ghost { transition: background .18s ease; }
.btn-wa-ghost:hover { background: rgba(255,255,255,.12); }

/* Hero secondary WhatsApp button (translucent) */
.btn-wa-translucent {
  background: rgba(255,255,255,.08);
  transition: background .18s ease;
}
.btn-wa-translucent:hover { background: rgba(255,255,255,.16); }

/* ---------- Form fields ---------- */
.field, .field-dark {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus {
  border-color: #C8A96A !important;
  box-shadow: 0 0 0 3px rgba(200,169,106,.18);
}
.field-dark:focus {
  border-color: #C8A96A !important;
  box-shadow: 0 0 0 3px rgba(200,169,106,.2);
}

/* ---------- Inline validation errors ---------- */
.err {
  font-size: 12.5px;
  color: #b4452f;
  margin: 2px 0 0;
}
.err-dark { color: #e9a08c; }

/* ---------- Modal ---------- */
.modal-close { transition: background .15s ease; }
.modal-close:hover { background: #e7e3db; }

/* ---------- Helpers ---------- */
[hidden] { display: none !important; }

/* Hide the native scrollbar on the gallery rail while keeping it scrollable */
.gallery-rail { scrollbar-width: thin; }