/*====light theme=====*/

body[data-theme="light"] .contact-section{
  background:linear-gradient(180deg, rgba(218, 241, 239, 0.95), rgba(239, 242, 239, 0.95));
  color:#0a1220;
  border: 1px solid rgb(164, 230, 236);
}

body[data-theme="light"] .form-group label{
  color: #000;
}

body[data-theme="light"] .form-group input,
body[data-theme="light"] .form-group textarea{
    background-color: white;
    border: 1px solid rgba(41, 34, 34, 0.367);
}

body[data-theme="light"] .form-group i{
    color: red;
}

body[data-theme="light"] .form-group input,
body[data-theme="light"] .form-group textarea{
    color: black;
}
/* ====== MAIN WRAPPER ====== */
.contact-section{
  max-width:900px;
  margin:70px auto;
  padding:30px 22px 50px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,43,43,.08), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(0,234,255,.08), transparent 40%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #080000, #02040a);
  
  border-radius:18px;
  box-shadow:0 0 20px rgb(251, 213, 0);
  position:relative;
  overflow:hidden;
}

/* ====== TITLE ====== */
.contact-section h2{
  text-align:center;
  color:#ecfc04;
  letter-spacing:1px;
  margin-bottom:20px;
  text-shadow:0 0 12px rgba(255,45,45,.7), 0 0 20px rgba(0,234,255,.3);
}

.contact-section h2 i{
  color:#f6ff00;
  margin-right:8px;
  text-shadow:0 0 8px rgba(255, 0, 0, 0.7);
}

/* ====== FORM LAYOUT ====== */
.contact-form{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

/* ====== FORM GROUP ====== */
.form-group{
  flex:1 1 calc(33.333% - 16px);
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
}

/* ====== LABEL + ICON ====== */

.form-group label{
  font-family: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:12px;
  letter-spacing:1px;
  color:#9fb7c3;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:6px;
}

.form-group label i{
  color:#00eaff;
  text-shadow:0 0 8px rgba(0,234,255,.6);
}

/* ====== INPUT / TEXTAREA ====== */
.form-group input,
.form-group textarea{
  background:rgba(5, 11, 35, 0.9);
  border:1px solid rgba(0,234,255,.25);
  border-radius:10px;
  padding:12px 12px;
  color:#eaffff;
  outline:none;
  transition:.25s ease;
}

/* ====== PLACEHOLDER ====== */
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:#6c8a96;
}

/* ====== FOCUS EFFECT ====== */
.form-group input:focus,
.form-group textarea:focus{
  border-color:#ff2d2d;
  box-shadow:0 0 0 2px rgba(255,45,45,.25), 0 0 15px rgba(0,234,255,.35);
  background:rgba(10,18,56,.95);
}

/* ====== SUBMIT BUTTON ====== */
.contact-form button{
  margin-top:10px;
  padding:14px 26px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg, #ff2d2d, #8b0000);
  color:#fff;
  font-family:'Orbitron', sans-serif;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow:0 0 22px rgba(255,45,45,.6);
  transition:.25s ease;
}

.contact-form button i{
  margin-right:8px;
}

.contact-form button:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 35px rgba(255,45,45,.9), 0 0 25px rgba(0,234,255,.35);
}

/* ====== CYBER SCAN LINE EFFECT ====== */
.contact-section::after{
  content:"";
  position:absolute;
  top:-120%;
  left:0;
  width:100%;
  height:140%;
  background:linear-gradient(180deg, transparent, rgba(0,234,255,.08), transparent);
  animation:scanLine 5s linear infinite;
  pointer-events:none;
}

@keyframes scanLine{
  0%{top:-140%;}
  100%{top:140%;}
}

/* ====== MOBILE RESPONSIVE ====== */
@media(max-width:900px){
  .form-group{flex:1 1 calc(50% - 16px);}
}

@media(max-width:600px){
  .form-group{flex:1 1 100%;}
  .contact-section{margin:40px 12px; padding:22px 14px 40px;}
  .contact-section h2{font-size:22px;}
}







/* Hacker-style Toast */
.toast{
  position: fixed;
  top: 20px;
  right: 20px;
  background: radial-gradient(120% 120% at 0% 0%, #0b1220 0%, #020814 60%);
  color: #9ffcff;
  padding: 14px 16px;
  border: 1px solid rgba(0,234,255,.6);
  border-radius: 10px;
  box-shadow:
    0 0 18px rgba(0,234,255,.35),
    inset 0 0 18px rgba(0,234,255,.15);
  z-index: 9999;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .2px;
  backdrop-filter: blur(6px);
  animation: toastIn .25s ease-out;
}
.toast.success{
  border-color:#00ff9c;
  box-shadow:
    0 0 22px rgba(0,255,156,.45),
    inset 0 0 18px rgba(0,255,156,.15);
}
.toast.error{
  border-color:#ff5a5a;
  color:#ffd2d2;
  box-shadow:
    0 0 22px rgba(255,90,90,.45),
    inset 0 0 18px rgba(255,90,90,.15);
}
.hidden{ display:none; }

@keyframes toastIn{
  from{ transform: translateX(20px) scale(.98); opacity:0; }
  to{ transform: translateX(0) scale(1); opacity:1; }
}

/* Loader tweak */
.loader{
  position: fixed;
  bottom: 20px;
  right: 20px;
  background:#020814;
  color:#00eaff;
  padding:10px 14px;
  border-radius:8px;
  border:1px solid rgba(0,234,255,.6);
  box-shadow: 0 0 12px rgba(0,234,255,.35);
  z-index: 9999;
}