@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #F06623;
  --primary-dark: #C94F16;
  --dark: #0B0B0C;
  --border: #E4E4E1;
  --soft: #FAFAF8;
  --bg: #F9F9FB;
}

* {
  font-family: Helvetica, "Prompt", Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--dark);
}

/* Header shadow once page is scrolled */
header.scrolled {
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 1px 12px rgba(11, 11, 12, 0.06);
}

/* Mobile nav */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#mobile-menu.open {
  max-height: 480px;
}

/* Dot pattern decoration */
.dot-pattern {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.dot-pattern span {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--border);
}

/* Gallery carousel */
.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.carousel-slide.active {
  opacity: 1;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}
.carousel-dot.active {
  background-color: #fff;
  width: 24px;
}

/* Bottom quick-menu dropdown */
#quick-menu-panel {
  display: none;
}
#quick-menu-panel.open {
  display: block;
}

/* ซ่อนปุ่มตาของ Browser (Edge / Chrome) ไม่ให้ซ้ำกับปุ่มของเราเอง */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}