/* ====================================================
   CONTACT PAGE — page-specific styles
   ====================================================
   Shared components (card-glass, blue-icon-box) live in the
   global stylesheets loaded via styles.css — only this page's
   unique form/FAQ/success-panel rules live here.
*/

/* Hero background image overlay */
.hero-overlay-img { filter: saturate(0.5) brightness(0.35); }

/* Form */
.contact-form-label {
  display: block; font-size: 10px; font-family: 'Inter', monospace;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #64748B; margin-bottom: 6px; transition: color 0.2s ease;
}
/* Khmer locale: labels must use the Khmer font (Inter/monospace has no Khmer
   glyphs) and need a larger, looser setting to stay legible. EN is unaffected. */
body.lang-kh .contact-form-label,
body.font-khmer .contact-form-label {
  font-family: var(--font-khmer), 'Noto Sans Khmer', sans-serif !important;
  font-size: 13px; letter-spacing: 0; line-height: 1.6;
}
.contact-form-input {
  width: 100%; background: #F8FAFC; border: 1.5px solid #E2E8F0;
  border-radius: 10px; padding: 12px 16px; font-size: 14px; color: #0F172A;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; outline: none;
}
.contact-form-input::placeholder { color: #CBD5E1; font-weight: 300; }
.contact-form-input:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.08); background: #FFFFFF; }
.form-focus-line {
  position: absolute; bottom: 0; left: 10px; right: 10px; height: 2px;
  background: linear-gradient(90deg, #3B82F6, #60A5FA); border-radius: 1px;
  transform: scaleX(0); transition: transform 0.3s ease; pointer-events: none;
}
.contact-form-input:focus + .form-focus-line { transform: scaleX(1); }
.contact-form-input.error { border-color: #EF4444; background: #FEF2F2; }
.contact-form-input.success { border-color: #22C55E; background: #F0FDF4; }
.contact-form-label.error { color: #EF4444; }
.error-msg {
  font-size: 11px; color: #EF4444; margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.error-msg.show { opacity: 1; transform: translateY(0); }

/* Inquiry type cards */
.inquiry-card {
  border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 14px 16px;
  cursor: pointer; transition: all 0.25s ease; background: #FFFFFF; position: relative;
}
.inquiry-card:hover { border-color: #93C5FD; background: #FAFBFF; }
.inquiry-card.selected { border-color: #2563EB; background: #EFF6FF; box-shadow: 0 0 0 3px rgba(59,130,246,0.08); }
.inquiry-card.selected .inquiry-dot { background: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.inquiry-card.selected .inquiry-title { color: #1D4ED8; }
.inquiry-dot {
  width: 18px; height: 18px; border: 2px solid #CBD5E1;
  border-radius: 50%; transition: all 0.2s ease; position: relative; flex-shrink: 0;
}
.inquiry-card.selected .inquiry-dot::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 6px; height: 6px; background: white; border-radius: 50%;
}

/* Submit button */
.submit-btn { position: relative; overflow: hidden; transition: all 0.3s ease; }
.submit-btn::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  background: rgba(255,255,255,0.15); border-radius: 50%; transform: translate(-50%,-50%);
  transition: width 0.5s ease, height 0.5s ease;
}
.submit-btn:hover::before { width: 300px; height: 300px; }
.submit-btn:active { transform: scale(0.98); }
.submit-btn.loading { pointer-events: none; }
.submit-btn .btn-text { transition: opacity 0.2s ease; }
.submit-btn.loading .btn-text { opacity: 0; }
.submit-btn .btn-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: opacity 0.2s ease; }
.submit-btn.loading .btn-spinner { opacity: 1; }
@keyframes cspin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Success panel */
.success-panel {
  opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none; position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
.success-panel.show { opacity: 1; transform: scale(1); pointer-events: auto; }
@keyframes checkmark { 0% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 0; } }
.checkmark-circle { animation: checkmark 0.6s ease 0.2s forwards; stroke-dasharray: 50; stroke-dashoffset: 50; }
.checkmark-check  { animation: checkmark 0.4s ease 0.5s forwards; stroke-dasharray: 30; stroke-dashoffset: 30; }

/* FAQ */
.faq-item { transition: all 0.25s ease; }
.faq-item:hover { background: #FAFBFF; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.25s ease; }

.info-card { transition: all 0.3s ease; }
.info-card:hover { border-color: #93C5FD; box-shadow: 0 8px 30px rgba(59,130,246,0.08); }

.map-container { border-radius: 16px; overflow: hidden; border: 1px solid #E2E8F0; }
.map-container iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(0.85) contrast(1.05); }

@keyframes urgentPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.2); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
.urgent-dot { animation: urgentPulse 2s ease-in-out infinite; }

.trust-item { transition: transform 0.3s ease; }
.trust-item:hover { transform: translateY(-2px); }

/* Icon-box gradient — uses design tokens instead of raw hex */
.icon-box-gradient {
  background: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-blue-100) 100%);
  border: 1px solid #BFDBFE;
}

/* Business-hours panel gradient — uses existing slate tokens */
.hours-panel-gradient {
  background: linear-gradient(135deg, var(--color-slate-50) 0%, var(--color-slate-100) 100%);
}