/* Offset for fixed header on Contact page */
<link rel="stylesheet" href="/frontend/contact-us.css?v=4">
#contactPage{ padding-top:110px !important; }
@media (max-width: 991px){
  #contactPage{ padding-top:80px !important; }
}

/* Contact Us page styles */
#contactPage{max-width:980px;margin:0 auto;padding:48px 16px}
#contactPage h1,#contactPage h2,#contactPage h3,#contactPage p,#contactPage li{color:#1c1f23}
#contactPage h1{font-size:32px !important;line-height:1.2;font-weight:800;margin:0 0 12px}
#contactPage .lead{font-size:18px;line-height:1.7;margin:0 0 26px;color:#2a2f35}
#contactPage h2{font-size:24px !important;line-height:1.3;font-weight:800;margin:28px 0 10px}
#contactPage p,#contactPage li{font-size:16px;line-height:1.7}
#contactPage ul{margin:0 0 12px 1.1rem;padding:0}
#contactPage .btn{display:inline-block;padding:12px 24px;border-radius:6px;font-weight:600;text-decoration:none}
#contactPage .btn-primary{background:#0db14b;color:#fff}
#contactPage .btn-secondary{background:#1c2b39;color:#fff}
#contactPage .grid2{display:grid;gap:16px;margin-top:10px}
@media(min-width:992px){#contactPage .grid2{grid-template-columns:1fr 1fr}}
#contactPage .card{border:1px solid #e9edf2;border-radius:12px;padding:16px;background:#fff}
#contactPage .section-muted{background:#f4f7f9;padding:28px;border-radius:12px}

/* Light form polish (scoped) */
#contactPage form .form-group{margin-bottom:12px}
#contactPage form input,#contactPage form select,#contactPage form textarea{
  width:100%;padding:10px 12px;border:1px solid #e1e6ec;border-radius:8px;outline:none
}
#contactPage form input:focus,#contactPage form select:focus,#contactPage form textarea:focus{
  border-color:#0db14b;box-shadow:0 0 0 3px rgba(13,177,75,.12)
}
#contactPage form button[type=submit]{background:#0db14b;color:#fff;border:0;border-radius:8px;padding:12px 18px;font-weight:700}
/* Offset scroll for fixed header */
#contactPage * {
  scroll-margin-top: 120px;
}
/* Ensure select + options are visible */
#contactPage select { color:#1c1f23 !important; background:#fff !important; }
#contactPage select option { color:#1c1f23 !important; background:#fff !important; }

/* Make sure the select is clickable if a wrapper adds overlays */
#contactPage .select-field-arrow select { position:relative; z-index:2; pointer-events:auto; }
/* Make the subject select use native styling and visible text */
#contactPage select.form-control{
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
  background:#fff !important;
  color:#1c1f23 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  position:relative; z-index:5;
}

/* Contact Page General */
#contactPage { padding-top: 110px }
@media (max-width: 991px) { #contactPage { padding-top: 80px } }

.contact-link {
  color: #0db14b;
  font-weight: 600;
  text-decoration: none;
}
.contact-link:hover { text-decoration: underline; }

.hidden-field {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  opacity: 0;
}

/* PDPA Section */
.pdpa-wrapper {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.pdpa-wrapper input[type="checkbox"] {
  margin-top: 4px;
}
.pdpa-note {
  color: #6c757d;
  font-size: .9rem;
}

/* Reply note under message field */
.reply-note {
  font-size: .9rem;
  color: #6c757d;
  margin-top: -4px;
}

/* Map styling */
.map-frame {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 12px;
}

/* Grid layout 1:3 ratio */
.grid13 {
  display: grid;
  gap: 16px;
}
@media (min-width: 992px) {
  .grid13 { grid-template-columns: 1fr 3fr; }
}
/* If your theme adds a fake arrow overlay, disable it */
#contactPage .select-field-arrow::after,
#contactPage .tp-contact-form-field::after{ pointer-events:none; }