/* contact.css — contact page specifics (mobile-first) */

:root{
  --g1:#ff2bd6;
  --g2:#7c2cff;
  --g3:#00a6ff;
  --card:#0f1720;
  --muted:#93a0b6;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
}

/* Hero tweak for contact */
.contact-hero{padding:64px 0 36px}
.contact-visual-img{width:180px;filter:drop-shadow(0 18px 40px rgba(124,44,255,0.08))}

/* contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start}
@media(max-width:980px){ .contact-grid{grid-template-columns:1fr} }

/* office card & map */
.office-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:12px;border-radius:10px;margin-top:12px}
.map-wrap{margin-top:14px;border-radius:10px;overflow:hidden}

/* form */
.contact-form{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:14px;border-radius:12px;box-shadow:0 16px 60px rgba(0,0,0,0.45)}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff;margin-bottom:10px;font-size:15px;
}
.contact-form textarea{min-height:140px;resize:vertical}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form-actions .btn-ghost{padding:10px 12px}
.form-status{margin-top:10px;font-size:14px;color:#9ff}

/* socials */
.socials{margin-top:12px;color:var(--muted)}
.socials a{color:var(--muted);text-decoration:none}

/* floats (re-using site classes but ensure spacing) */
.whatsapp-float{right:18px;bottom:100px}
#scrollTop{right:18px;bottom:20px}

/* small helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.sticky-cta{position:fixed;bottom:0;left:0;width:100%;background:linear-gradient(90deg,#7c2cff,#00a6ff);
color:#fff;display:flex;justify-content:center;align-items:center;gap:10px;padding:10px;font-weight:600;z-index:9999;}
.sticky-cta .btn-primary{background:#fff;color:#111;padding:8px 14px;border-radius:8px;text-decoration:none;}

html{scroll-behavior:smooth;}
.btn-primary:hover{transform:scale(1.05);transition:.3s;}
.section-title{position:relative;display:inline-block;}
.section-title::after{content:'';position:absolute;left:0;bottom:-6px;width:40%;height:3px;
background:linear-gradient(90deg,#ff2bd6,#00a6ff);border-radius:2px;}
.reveal{opacity:0;transform:translateY(20px);transition:all .8s;}
.reveal.active{opacity:1;transform:translateY(0);}

/* ========== CONTACT PAGE - ULTRA UPGRADE (Append) ========== */

/* HERO */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(124,44,255,0.12), transparent 55%);
  z-index: -1;
}

/* LOGO FLOAT */
.contact-visual-img {
  animation: floatLogo 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes floatLogo {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px) rotate(-2deg); }
  100% { transform: translateY(0); }
}

/* FORM GLASS + STEP TRANSITION */
.contact-form {
  position: relative;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  padding: 18px;
  border-radius: 14px;
}

.form-progress {
  height: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  margin-bottom: 14px;
  overflow: hidden;
}
.form-progress span {
  display: block;
  height: 6px;
  width: 0%;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  transition: width .36s ease;
  border-radius: 12px;
}

/* step animation */
.step {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: all .36s cubic-bezier(.2,.9,.2,1);
}
.step.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* button micro interactions */
.btn-primary {
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:active { transform: translateY(1px) scale(.997); }

/* office card hover lift */
.office-card {
  transition: transform .26s ease, box-shadow .26s ease;
}
.office-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

/* map polish */
.map-wrap iframe {
  border-radius: 12px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

/* socials underline */
.socials a {
  position: relative;
  transition: transform .22s, color .22s;
  color: var(--muted);
}
.socials a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  border-radius: 3px;
  transition: width .28s ease;
}
.socials a:hover {
  color: #fff;
  transform: translateX(4px);
}
.socials a:hover::after { width: 100%; }

/* sticky CTA polish */
.sticky-cta {
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* subtle top glow line */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--g1), var(--g3));
  opacity: .12;
  pointer-events: none;
  z-index: 9998;
}

/* ========== Single-step form + select fix ========== */

.contact-form .single-step { display:block; }
.contact-form .step { display:none !important; } /* hide any multi-step styles */

.contact-form input,
.contact-form textarea,
.contact-form select {
  width:100%;
  padding:12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: #e6eefc;      /* visible text on dark background */
  font-size:15px;
  margin-bottom:10px;
  -webkit-appearance: none; /* normalize select on iOS/Safari */
  appearance: none;
}

/* Make placeholder muted but readable */
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form select::placeholder {
  color: rgba(235,241,255,0.56);
}

/* Ensure the select's chosen option is visible */
.contact-form select option {
  color: #0b1220; /* option text in native dropdown (light) */
}

/* When select is closed (shows chosen value), style its displayed text */
.contact-form select {
  color: #e6eefc; /* visible on dark UI */
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.08) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.08) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* fallback for very old browsers: show caret */
.contact-form select::-ms-expand { display: none; }

/* small focus ring */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: 3px solid rgba(124,44,255,0.12);
  outline-offset: 2px;
}

/* status message */
.form-status { font-size:14px; color:#9ff; }

/* tidy mobile */
@media(max-width:640px){
  .contact-form .btn-ghost, .contact-form .btn-primary { flex:1; width:100%; }
}


/* ====== Success Popup Animation ====== */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.4s ease forwards;
}

.popup-inner {
  background: linear-gradient(145deg, rgba(18,18,30,0.95), rgba(10,10,18,0.9));
  border-radius: 16px;
  padding: 24px 28px;
  text-align: center;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,166,255,0.25), 0 0 20px rgba(124,44,255,0.4);
  transform: scale(0.8);
  opacity: 0;
  animation: popupIn 0.45s ease forwards;
}

.popup-icon {
  font-size: 44px;
  margin-bottom: 10px;
  animation: bounceIcon 1s ease infinite alternate;
}

/* Keyframes */
@keyframes popupIn {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes bounceIcon {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

@keyframes fadeIn {
  from { background: rgba(0,0,0,0); }
  to { background: rgba(0,0,0,0.6); }
}

/* Auto fade-out animation */
.popup.fadeOut {
  animation: fadeOut 0.4s ease forwards;
}
@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}