/* ============================================
   Contact Page — Scoped Styles
   Scope: .contact-page
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

/* Reset heading override từ main.css */
.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page h4 {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
  margin: 0;
  padding: 0;
}

/* Typography */
.contact-page .contact-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
}

.contact-page .contact-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.contact-page .contact-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.contact-page .contact-pin-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.875rem;
  font-weight: 700;
}

/* Color token: --primary */
.contact-page .text-primary,
.contact-page .hover\:text-primary:hover { color: rgb(38, 60, 111); }

.contact-page .bg-primary { background-color: rgb(38, 60, 111) !important; }

.contact-page .border-primary { border-color: rgb(38, 60, 111); }

.contact-page .focus\:border-primary:focus { border-color: rgb(38, 60, 111); }
.contact-page .focus\:ring-primary:focus { --tw-ring-color: rgb(38, 60, 111); }

/* group-hover bg-primary */
.contact-page .group:hover .group-hover\:bg-primary { background-color: rgb(38, 60, 111) !important; }
.contact-page .group:hover .group-hover\:text-white { color: #fff; }

/* Color token: --dark */
.contact-page .text-dark { color: #111827; }

/* bg-white/5, /10 */
.contact-page .bg-white\/5  { background-color: rgba(255,255,255,0.05); }
.contact-page .bg-white\/10 { background-color: rgba(255,255,255,0.10); }

/* border-white/20, /50 */
.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); }
.contact-page .border-white\/50 { border-color: rgba(255,255,255,0.50); }

/* text-white/80, /90 */
.contact-page .text-white\/80 { color: rgba(255,255,255,0.80); }
.contact-page .text-white\/90 { color: rgba(255,255,255,0.90); }

/* bg-white/95 */
.contact-page .bg-white\/95 { background-color: rgba(255,255,255,0.95); }

/* border-t border-white/20 */
.contact-page .border-white\/20 { border-color: rgba(255,255,255,0.20); }

/* rounded fixes — main.css có thể reset border-radius */
.contact-page .rounded-\[16px\]  { border-radius: 16px !important; }
.contact-page .rounded-\[24px\]  { border-radius: 24px !important; }
.contact-page .rounded-\[12px\]  { border-radius: 12px !important; }
.contact-page .rounded-full      { border-radius: 9999px !important; }
.contact-page .rounded-\[12px\]  { border-radius: 12px !important; }

/* button reset */
.contact-page button,
.contact-page input,
.contact-page select,
.contact-page textarea {
  font-size: inherit;
}

/* Send Message button */
.contact-page .bg-primary.rounded-\[12px\] {
  border-radius: 12px !important;
  background-color: rgb(38, 60, 111) !important;
}

.contact-page .bg-primary.rounded-\[12px\]:hover {
  background-color: rgba(38, 60, 111, 0.9) !important;
}

/* Icon color fix */
.contact-page .text-primary i,
.contact-page i.text-primary,
.contact-page .text-primary svg,
.contact-page svg.text-primary {
  color: rgb(38, 60, 111) !important;
}

/* Icon box bg-blue-50 */
.contact-page .bg-blue-50 {
  background-color: rgb(239, 246, 255) !important;
}

/* blue-100 border */
.contact-page .border-blue-100 {
  border-color: rgb(219, 234, 254) !important;
}

/* info box bg-blue-50 text-primary */
.contact-page .bg-blue-50.rounded-\[12px\] {
  background-color: rgb(239, 246, 255) !important;
}

/* Icon box hover — đổi icon sang trắng khi hover card */
.contact-page .group:hover .group-hover\:text-white i,
.contact-page .group:hover .group-hover\:text-white svg {
  color: #ffffff !important;
}

/* Form inputs border-radius và placeholder */
.contact-page input,
.contact-page select,
.contact-page textarea {
  border-radius: 12px !important;
}

.contact-page input::placeholder,
.contact-page textarea::placeholder {
  color: #9ca3af !important;
}

/* contact-form-title size */
.contact-page .contact-form-title {
  font-size: 2rem !important;
}

/* Consent checkbox alignment */
.contact-page .custom-checkbox {
  margin-top: 2px !important;
  flex-shrink: 0;
}