/* ============================================================
   HOÀNG PHÁT PAINT — Custom CSS
   Port từ React src/index.css
   ============================================================ */

:root {
  --color-gold-light: #FDB931;
  --color-gold-primary: #D4AF37;
  --color-gold-dark: #9f7928;
  --color-cream: #FDFBF7;
  --color-dark: #1A1A1A;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f8f8f8;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--color-gold-light), var(--color-gold-dark));
  border-radius: 4px;
}

/* hide scrollbar cho horizontal scroll containers */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

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

.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

@keyframes slowZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.15);
  }
}

.animate-slow-zoom {
  animation: slowZoom 25s linear infinite alternate;
}

/* ── Typography ──────────────────────────────────────────── */
h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

/* ── Layout helpers ──────────────────────────────────────── */
.max-w-content {
  max-width: 1440px;
}

.bg-cream {
  background-color: #FDFBF7;
}

/* ── Section spacing ─────────────────────────────────────── */
.section-padding {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
}

/* ── Gold text gradient ──────────────────────────────────── */
.text-gold-gradient {
  background: linear-gradient(135deg, #FDB931 0%, #D4AF37 50%, #9f7928 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CTA Buttons ─────────────────────────────────────────── */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold-dark) 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  text-decoration: none;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
  filter: brightness(1.1);
  color: #fff;
  text-decoration: none;
}

.btn-cta svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cta:hover svg {
  transform: translateX(6px);
}

.btn-cta-white {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: #fff;
  color: var(--color-gold-dark);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.btn-cta-white:hover {
  background: #fdfdfd;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  color: var(--color-gold-dark);
  text-decoration: none;
}

/* ── Glassmorphism ───────────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ── Image zoom ──────────────────────────────────────────── */
.img-zoom {
  overflow: hidden;
  border-radius: 4px;
}

.img-zoom img {
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.img-zoom:hover img {
  transform: scale(1.08);
}

/* ── Masonry grid ────────────────────────────────────────── */
.masonry-grid {
  columns: 3;
  column-gap: 1.5rem;
}

.masonry-grid>* {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
  .masonry-grid {
    columns: 2;
  }
}

@media (max-width: 640px) {
  .masonry-grid {
    columns: 1;
  }
}

/* ── Vertical text ───────────────────────────────────────── */
.vertical-rl {
  writing-mode: vertical-rl;
}

/* ── Reset hamburger button — override Hello Elementor global button styles ── */
#hp-menu-toggle,
#hp-menu-toggle:hover,
#hp-menu-toggle:focus,
#hp-menu-toggle:active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-appearance: none;
  appearance: none;
}

/* ── HP Header ───────────────────────────────────────────── */
.hp-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  transition: all 0.5s ease-in-out;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}

.hp-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

/* ── HP Mobile menu ──────────────────────────────────────── */
.hp-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.hp-mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

/* ── Hamburger → × animation ─────────────────────────────── */
#hp-hamburger span {
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              width 0.25s ease;
}

#hp-menu-toggle.is-open #hp-hamburger span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
  width: 1.5rem !important;
}

#hp-menu-toggle.is-open #hp-hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

#hp-menu-toggle.is-open #hp-hamburger span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
  width: 1.5rem !important;
}

/* ── Product card hover ──────────────────────────────────── */
.hp-product-card:hover .hp-product-img {
  transform: translateY(-24px);
}

/* ══════════════════════════════════════════════════════════
   FLUENT FORM — Hoàng Phát Design System
   ══════════════════════════════════════════════════════════ */

/* Wrapper */
.fluentform {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Field group spacing */
.fluentform .ff-el-group {
  margin-bottom: 1.5rem !important;
}

/* Labels */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label span {
  display: block !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: #a8a29e !important; /* stone-400 */
  margin-bottom: 0.5rem !important;
  margin-left: 0.25rem !important;
}

/* Required asterisk */
.fluentform .ff-el-input--label .ff-el-is-required {
  color: #f59e0b !important; /* amber-500 */
}

/* All text inputs, selects, textareas */
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform input[type="password"],
.fluentform select,
.fluentform textarea {
  width: 100% !important;
  padding: 1.1rem 1.5rem !important;
  background-color: #f5f5f4 !important; /* stone-100 */
  border: 1.5px solid transparent !important;
  border-radius: 1rem !important; /* rounded-2xl */
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: #1c1917 !important; /* stone-900 */
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.fluentform .ff-el-form-control:focus,
.fluentform input[type="text"]:focus,
.fluentform input[type="email"]:focus,
.fluentform input[type="tel"]:focus,
.fluentform input[type="number"]:focus,
.fluentform input[type="url"]:focus,
.fluentform input[type="password"]:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  background-color: #ffffff !important;
  border-color: #f59e0b !important; /* amber-400 */
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12) !important;
  outline: none !important;
}

/* Placeholder */
.fluentform .ff-el-form-control::placeholder,
.fluentform input::placeholder,
.fluentform textarea::placeholder {
  color: #a8a29e !important; /* stone-400 */
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Textarea */
.fluentform textarea.ff-el-form-control,
.fluentform textarea {
  min-height: 8rem !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

/* Select arrow */
.fluentform select.ff-el-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3 3 3-3' stroke='%23a8a29e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1.25rem !important;
  padding-right: 2.5rem !important;
}

/* Error state */
.fluentform .has-error .ff-el-form-control,
.fluentform .ff_input_has_error .ff-el-form-control {
  border-color: #ef4444 !important; /* red-500 */
  background-color: #fff8f8 !important;
}

/* Error message */
.fluentform .error.text-danger,
.fluentform .ff-el-form-control-error,
.fluentform .error {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #ef4444 !important;
  margin-top: 0.375rem !important;
  margin-left: 0.25rem !important;
  letter-spacing: 0.02em !important;
}

/* Checkboxes & radios */
.fluentform .ff-el-form-check {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  margin-bottom: 0.5rem !important;
  cursor: pointer !important;
}

.fluentform .ff-el-form-check-input {
  width: 1.1rem !important;
  height: 1.1rem !important;
  border: 2px solid #d6d3d1 !important; /* stone-300 */
  border-radius: 0.25rem !important;
  background-color: #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  accent-color: #f59e0b !important;
  transition: border-color 0.2s !important;
}

.fluentform .ff-el-form-check-input:checked {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
}

.fluentform .ff-el-form-check-label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #44403c !important; /* stone-700 */
  cursor: pointer !important;
}

/* Submit button */
.fluentform .ff-btn,
.fluentform .ff-btn-md,
.fluentform button[type="submit"],
.fluentform input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 1.25rem 2rem !important;
  background: linear-gradient(135deg, #FDB931 0%, #D4AF37 50%, #9f7928 100%) !important;
  color: #fff !important;
  font-size: 0.8125rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  border: none !important;
  border-radius: 1rem !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.fluentform .ff-btn:hover,
.fluentform .ff-btn-md:hover,
.fluentform button[type="submit"]:hover,
.fluentform input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.45) !important;
  filter: brightness(1.06) !important;
  color: #fff !important;
}

.fluentform .ff-btn:active,
.fluentform button[type="submit"]:active {
  transform: translateY(0) !important;
}

/* Loading spinner on button */
.fluentform .ff-btn.ff-btn-loading {
  opacity: 0.8 !important;
  pointer-events: none !important;
}

/* Success message */
.fluentform .ff-message-success,
.fluentform .ff-success-page,
.fluentform .fluentform_submission_confirmation {
  padding: 1.5rem 2rem !important;
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 1rem !important;
  color: #78350f !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.6 !important;
}

/* Column layout inside FluentForm */
.fluentform .ff-column-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
}

@media (max-width: 640px) {
  .fluentform .ff-column-2 {
    grid-template-columns: 1fr !important;
  }

  .fluentform .ff-el-form-control,
  .fluentform input,
  .fluentform textarea,
  .fluentform select {
    font-size: 1rem !important; /* prevent iOS zoom on focus */
  }
}

/* ── FluentForm — Dark variant (Footer newsletter) ───────── */
#contact .fluentform .ff-el-input--label label,
#contact .fluentform .ff-el-input--label span {
  color: rgba(255,255,255,0.45) !important;
}

#contact .fluentform .ff-el-form-control,
#contact .fluentform input[type="text"],
#contact .fluentform input[type="email"],
#contact .fluentform input[type="tel"],
#contact .fluentform input[type="number"],
#contact .fluentform select,
#contact .fluentform textarea {
  background-color: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem 1.25rem !important;
}

#contact .fluentform .ff-el-form-control::placeholder,
#contact .fluentform input::placeholder,
#contact .fluentform textarea::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

#contact .fluentform .ff-el-form-control:focus,
#contact .fluentform input:focus,
#contact .fluentform textarea:focus {
  background-color: rgba(255,255,255,0.13) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18) !important;
}

#contact .fluentform .ff-btn,
#contact .fluentform .ff-btn-md,
#contact .fluentform button[type="submit"],
#contact .fluentform input[type="submit"] {
  border-radius: 0.75rem !important;
  padding: 0.875rem 1.25rem !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
}

#contact .fluentform .ff-el-group {
  margin-bottom: 1rem !important;
}

#contact .fluentform .error.text-danger,
#contact .fluentform .ff-el-form-control-error {
  color: #fca5a5 !important; /* red-300 — readable on dark */
}

#contact .fluentform .ff-message-success,
#contact .fluentform .fluentform_submission_confirmation {
  background: rgba(245,158,11,0.15) !important;
  border-color: rgba(245,158,11,0.4) !important;
  color: #fde68a !important;
}