/* XAXA Overseas — site CSS */

html { scroll-behavior: smooth; }
/* overflow-x: clip prevents horizontal scroll without breaking position:sticky (hidden creates a scroll container) */
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }

/* ---------- Hero background ---------- */
.hero-bg {
  background:
    radial-gradient(at 80% 20%, rgba(34,197,94,.12), transparent 40%),
    radial-gradient(at 20% 80%, rgba(202,138,4,.10), transparent 40%),
    linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #fefce8 100%);
}

.hero-rice {
  background-image:
    linear-gradient(135deg, rgba(20,83,45,.85) 0%, rgba(21,128,61,.7) 50%, rgba(202,138,4,.6) 100%),
    url('https://images.unsplash.com/photo-1586201375761-83865001e31c?w=1600&q=70&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
}

/* ---------- Animated grain bg ---------- */
@keyframes float-grain {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-12px) rotate(6deg); }
}
.grain { animation: float-grain 5s ease-in-out infinite; }

/* ---------- Card hover ---------- */
.product-card {
  transition: transform .4s ease, box-shadow .4s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(21,128,61,.25);
}

/* ---------- Badge ---------- */
.badge {
  background: linear-gradient(135deg, #facc15, #ca8a04);
  color: #422006;
  font-weight: 700;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 4px 12px rgba(202,138,4,.4);
}

/* ---------- Marquee (markets ribbon) ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  animation: marquee 35s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Chat bubbles ---------- */
.chat-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  word-wrap: break-word;
  animation: pop .25s ease;
}
.chat-msg.bot { background: #ffffff; color: #1f2937; border: 1px solid #e5e7eb; border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg.user { background: linear-gradient(135deg,#15803d,#22c55e); color: white; border-bottom-right-radius: 4px; align-self: flex-end; margin-left: auto; }

@keyframes pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#chatBody { display: flex; flex-direction: column; gap: 8px; }

.quick-btn {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.quick-btn:hover {
  background: #15803d;
  color: white;
  border-color: #15803d;
}

/* ---------- Section heading ---------- */
.section-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

/* ---------- Stat counter card ---------- */
.stat-card {
  background: linear-gradient(135deg, #ffffff, #f0fdf4);
  border: 1px solid #dcfce7;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: all .3s;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(21,128,61,.2);
  border-color: #86efac;
}

/* ---------- Country pill ---------- */
.country-pill {
  display: inline-block;
  background: #f0fdf4;
  color: #15803d;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 2px;
}

/* ---------- Form ---------- */
.input {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
label.lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---------- Button ---------- */
.btn-primary {
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: white;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .3s;
  box-shadow: 0 10px 24px -6px rgba(21,128,61,.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -6px rgba(21,128,61,.5);
}

/* ---------- Review card ---------- */
.review-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  transition: all .3s;
}
.review-card:hover { border-color: #86efac; transform: translateY(-4px); }
.stars { color: #facc15; }

/* ---------- Scrollbar ---------- */
#chatBody::-webkit-scrollbar { width: 6px; }
#chatBody::-webkit-scrollbar-track { background: transparent; }
#chatBody::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }