/* Contact form styles (prefixed with .contact-) */
:root{
  /* Updated to BCG Green Palette */
  --pink: #4ade80;       /* Bright Green (Primary) */
  --pink-hover: #22c55e; /* darker green for hover */
  --btn-text: #064e3b;   /* Dark green text for contrast */
  
  --grey:#333333;
  --light:#f6f7fb;
  --border:#e5e7ee;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
  color:#222;
}

.contact-wrap{
  padding:32px 16px 80px;
  display:flex;
  justify-content:center;
}

.contact-card{
  width:100%;
  max-width:880px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:28px 28px 34px;
}

.contact-heading{
  margin:0;
  text-align:center;
  font-family:'Merriweather', serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing:.3px;
  line-height:1.25;
}

.contact-heading-pink{color:var(--pink)}
.contact-heading-grey{color:var(--grey)}

.contact-heading-underline{
  width:140px;
  height:2px;
  background:var(--pink); /* Changed from #555 to Green */
  margin:12px auto 24px;
  opacity:1; /* Increased opacity for visibility */
}

.contact-form{margin-top:6px}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:16px; row-gap:8px;
}

@media (max-width:720px){
  .contact-grid{grid-template-columns:1fr;}
}

.contact-field, .contact-field-full{margin-bottom:18px}
.contact-field-full{grid-column:1/-1}

.contact-input, .contact-textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 14px;
  font-size:16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  background:#fff;
}

.contact-input:focus, .contact-textarea:focus{
  border-color:var(--pink);
  /* Updated shadow to Green RGBA */
  box-shadow:0 0 0 3px rgba(74, 222, 128, .25); 
}

.contact-textarea{min-height:160px; resize:vertical}

.contact-label{display:block; font-weight:600; margin-bottom:10px; font-size:16px; color:#222}
.contact-label-sm{display:block; font-weight:600; margin-bottom:10px; font-size:14px; color:#222}
.contact-label-sm .regular{font-weight:400; opacity:.8}

.contact-verify{
  grid-column:1/-1;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  margin:10px 0 18px;
}

.contact-verify-title{
  margin:0 0 10px 0;
  font-weight:700;
  font-size:14px;
  color:#111;
}

.contact-verify-box{
  display:flex; flex-direction:column; gap:10px;
}

.contact-question{font-size:16px; color:#333}

.contact-change-btn{
  align-self:flex-start;
  background:#fff; /* Changed to white to look cleaner */
  color:#333;
  border:1px solid #ddd;
  border-radius:8px;
  padding:8px 12px;
  font-size:14px;
  cursor:pointer;
  transition: all 0.2s;
}
.contact-change-btn:hover{
    border-color: var(--pink);
    color: var(--pink);
}

.contact-consent{margin:8px 0 18px; font-size:14px; color:#333}
.contact-status{min-height:24px; font-size:15px; margin-bottom:10px; color:green}

.contact-submit{
  display:block;
  margin:8px auto 0;
  padding:12px 18px;
  border:none;
  border-radius:9999px;
  background:var(--pink);
  color: var(--btn-text); /* Dark Green Text */
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  width:auto;
  min-width:160px;
  text-align:center;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-submit:hover{
    background: var(--pink-hover);
    transform: translateY(-1px);
    filter: none;
}


/* Placeholder styling for message textarea */
.contact-textarea::placeholder{font-family:'Open Sans', serif;}


/* Success Modal */
.contact-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.contact-modal{
  background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25);
  width:min(520px, 92vw); padding:24px 22px;
  text-align:center;
}
.contact-modal h3{ margin:6px 0 8px; font-size:20px; font-weight:600; color:#111; }
.contact-modal p{ margin:0 0 14px; font-size:15px; color:#333; }

.contact-modal .ok-btn{
  display:inline-block; 
  padding:10px 24px; 
  border:none; 
  border-radius:9999px; 
  background:var(--pink); /* Green */
  color:var(--btn-text);  /* Dark Text */
  cursor:pointer;
  font-weight: 700;
  transition: background-color 0.3s ease;
}
.contact-modal .ok-btn:hover{
    background: var(--pink-hover);
}

.contact-modal .icon{
  width:52px; height:52px; border-radius:50%; display:inline-grid; place-items:center; margin:2px auto 10px; 
  background:rgba(74, 222, 128, .15); /* greenish */
}
.contact-modal .icon svg{ width:26px; height:26px; color: var(--btn-text); }
.contact-modal-overlay.show{ display:flex; animation:fadeIn .18s ease-out both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }


/* Loader Spinner */
.contact-submit.loading {
  pointer-events: none;
  opacity: 0.8;
  position: relative;
  color: transparent; /* Hide text */
}

.contact-submit.loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--btn-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}