/* 💚 contact.css — styling for contact.html (premium glass look) */

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg,#fff4e6,#ffe7cc);
  color:#0f172a;
  min-height:100vh;
  padding-bottom:60px;
}

/* back button */
.back-btn{
  position:fixed;left:14px;top:14px;
  background:#0f172a;color:#fff;border:none;padding:8px 12px;border-radius:10px;cursor:pointer;z-index:10;
}

/* layout */
.contact-page{max-width:1100px;margin:0 auto;padding:28px 16px}

/* header */
.contact-hero{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-top:28px;flex-wrap:wrap}
.hero-left h1{font-size:2rem;font-weight:800}
.hero-left p{opacity:.75;margin-top:6px}
.hero-right{display:flex;gap:12px;align-items:center}
/* mini map card */
.mini-map-card{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.9);padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:0 10px 22px rgba(0,0,0,.08);backdrop-filter:blur(8px)}
.mini-map-card img{width:44px;height:44px}

/* creator */
.creator-section{margin-top:26px}
.creator-card{display:flex;gap:20px;background:rgba(255,255,255,.95);padding:18px;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.08);align-items:center;flex-wrap:wrap}
.creator-img{width:140px;height:140px;object-fit:cover;border-radius:12px;border:5px solid rgba(0,0,0,0.04)}
.creator-info{flex:1;min-width:240px}
.creator-info h2{font-size:1.6rem;margin-bottom:6px}
.role{opacity:.7;margin-bottom:8px}
.about-small{opacity:.8;margin-bottom:12px}

/* meta grid */
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:12px 0}
.meta-grid h4{font-size:.95rem;margin-bottom:6px}
.meta-grid p{opacity:.85;font-size:.95rem}

/* contact links */
.contact-links{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.contact-links a{background:#22c55e;color:#fff;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600;display:inline-block}
.small-note{margin-top:10px;opacity:.8;font-size:.95rem}

/* contributors */
.contributors{margin-top:22px}
.contributors h3{font-size:1.15rem;margin-bottom:10px}
.contrib-list{list-style:none;padding-left:0}
.contrib-list li{background:rgba(255,255,255,.9);padding:10px;border-radius:10px;margin-bottom:8px;box-shadow:0 8px 20px rgba(0,0,0,.05)}

/* message form */
.message-section{margin-top:22px}
.message-section h3{font-size:1.2rem;margin-bottom:6px}
.msg-form{background:rgba(255,255,255,.95);padding:16px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.06)}
.msg-form .row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.msg-form input,.msg-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(15,23,42,.06);font-size:0.95rem}
.msg-form input[type="text"], .msg-form input[type="tel"]{max-width:48%}
.msg-form textarea{resize:vertical}

/* buttons */
.form-actions{display:flex;gap:10px;align-items:center;margin-top:10px}
.btn-primary{background:#111827;color:#fff;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:700}
.btn-ghost{background:transparent;border:2px solid #111827;padding:8px 12px;border-radius:10px;cursor:pointer}

/* status */
.form-status{margin-top:10px;color:#065f46;font-weight:600}

/* footer */
.contact-footer{text-align:center;margin-top:28px;opacity:.8;font-size:0.9rem;padding-bottom:20px}

/* responsive tweaks */
@media(max-width:800px){
  .creator-card{flex-direction:column;align-items:center;text-align:center}
  .msg-form input[type="text"], .msg-form input[type="tel"]{max-width:100%}
}