/* =========================================================
   contact-us.css — page-specific styles (loads after style.css)
   Reuses shared theme variables from style.css.
   ========================================================= */

/* ---------- Contact method cards (built on .icon-box) ---------- */
.contact-method-card{display:block;cursor:pointer;}
.contact-method-card p{margin:0;word-break:break-word;}
.contact-method-card.featured{
  border-color:#25D366;
  background:linear-gradient(135deg,rgba(37,211,102,.08),var(--bg-card));
}
.contact-method-card.featured .icon{background:rgba(37,211,102,.16);color:#25D366;}
.contact-method-card.featured:hover{border-color:#25D366;box-shadow:0 0 0 1px rgba(37,211,102,.25),0 10px 30px rgba(0,0,0,.45);}

/* ---------- Checklist (10 support issues) ---------- */
.check-list{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.check-item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:16px 18px;transition:var(--transition);
}
.check-item:hover{border-color:var(--blue-bright);}
.check-num{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-bright),var(--blue-primary));
  color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;
}
.check-item h4{font-size:15px;color:#fff;margin-bottom:4px;}
.check-item p{font-size:13.5px;margin:0;}

/* ---------- Contact Form ---------- */
.contact-form{margin-top:22px;}
.form-group{margin-bottom:18px;}
.form-group label{
  display:block;font-size:13.5px;font-weight:600;color:var(--text-mute);margin-bottom:7px;
}
.form-group input,
.form-group textarea{
  width:100%;background:var(--bg-card);border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);padding:13px 16px;color:var(--text-main);
  font-family:var(--font-body);font-size:14.5px;transition:var(--transition);resize:vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--text-faint);}
.form-group input:focus,
.form-group textarea:focus{
  outline:none;border-color:var(--cyan-accent);
  box-shadow:0 0 0 3px rgba(0,209,255,.15);
}
.form-error{
  display:none;color:#ff6b6b;font-size:12.5px;margin-top:6px;
}
.form-group.invalid input,
.form-group.invalid textarea{border-color:#ff6b6b;}
.form-group.invalid .form-error{display:block;}

.form-submit{width:100%;justify-content:center;}
.form-submit[disabled]{opacity:.7;cursor:not-allowed;}
.form-status{
  margin:14px 0 0;font-size:13.5px;min-height:18px;
}
.form-status.success{color:#4ade80;}
.form-status.error{color:#ff6b6b;}

/* ---------- Responsive ---------- */
@media (max-width: 767px){
  .check-list{grid-template-columns:1fr;}
}