/* CONTACT PAGE */
.contact-section { padding: 2.5rem 0 6rem; position: relative; z-index: 1; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 1.75rem; align-items: stretch; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info { display: flex; flex-direction: column; }
.contact-info-card { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.contact-info-card h3 { font-size: 1.25rem; font-weight: 800; color: var(--text); margin-bottom: 0.65rem; }
.contact-info-card > p { font-size: 0.87rem; color: var(--text-dim); line-height: 1.75; margin-bottom: 1.75rem; }

.contact-details { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.75rem; }
.contact-detail { display: flex; align-items: center; gap: 0.9rem; }
.det-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--tag-bg); border: 1px solid var(--border); border-radius: 9px; color: var(--blue-glow); font-size: 0.85rem; flex-shrink: 0; }
.det-label { display: block; font-size: 0.68rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }
.contact-detail a, .contact-detail span { font-size: 0.85rem; color: var(--text-dim); text-decoration: none; transition: color 0.2s; font-weight: 500; }
.contact-detail a:hover { color: var(--blue-glow); }

.avail-pill { display: inline-flex; align-items: center; gap: 9px; background: rgba(34,211,238,0.06); border: 1px solid rgba(34,211,238,0.2); border-radius: 100px; padding: 9px 16px; font-size: 0.79rem; font-weight: 700; color: var(--cyan); }
.avail-dot { width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; animation: dot-pulse 1.5s infinite; }

.contact-form-wrap { display: flex; flex-direction: column; }
.contact-form-card { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.contact-form-card form { flex: 1; display: flex; flex-direction: column; }
.contact-form-card form .submit-btn { margin-top: auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 580px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 1.35rem; }
.form-group label { display: block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0.55rem; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap i { position: absolute; left: 0.9rem; color: var(--text-muted); font-size: 0.85rem; pointer-events: none; z-index: 1; transition: color 0.2s; }
.input-wrap.textarea-wrap { align-items: flex-start; }
.input-wrap.textarea-wrap i { top: 0.9rem; }
.input-wrap input, .input-wrap textarea {
  width: 100%;
  padding: 0.82rem 0.9rem 0.82rem 2.6rem;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.22s, box-shadow 0.22s;
  outline: none;
}
.input-wrap input:focus, .input-wrap textarea:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.input-wrap input::placeholder, .input-wrap textarea::placeholder { color: var(--text-muted); }
.input-wrap input:focus ~ i, .input-wrap textarea:focus + i { color: var(--blue-glow); }

.submit-btn { width: 100%; justify-content: center; padding: 0.9rem; font-size: 0.9rem; }
.submit-btn.loading { pointer-events: none; opacity: 0.7; }
.submit-btn.loading i { animation: spin-icon 1s linear infinite; }
@keyframes spin-icon { to { transform: rotate(360deg); } }

.form-success { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; gap: 1rem; }
.success-icon { width: 68px; height: 68px; background: linear-gradient(135deg, var(--blue-mid), var(--cyan)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: white; box-shadow: 0 0 40px rgba(59,130,246,0.4); animation: pop-in 0.5s var(--transition); }
@keyframes pop-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.form-success h3 { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.form-success p { color: var(--text-dim); font-size: 0.9rem; }