/* =========================================================
   CONTACT — Bubble Style tuned for contact.php
   - Targets .contact-form-card and its children
   - No absolute positioning (auto layout friendly)
   - Responsive, accessible focus states
   - Works alongside the inline tweaks in contact.php
   ========================================================= */

/* Container polish (keeps your glassmorphism, just softens) */
.contact-form-card{
  /* layout-safe width handled inline; keep here minimal overrides */
  --bubble-shadow: 0 10px 26px rgba(0,0,0,.22);
  --field-shadow:  inset 2px 2px 5px rgba(0,0,0,0.05), 2px 4px 10px rgba(0,0,0,0.12);
  --field-shadow-hover: 0 6px 16px rgba(0,0,0,0.18);
  --focus-ring: 3px solid rgba(127,63,191,.55);
  --brand: #7f3fbf;
  --brand-2: #6b35a7;

  box-shadow: var(--bubble-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Heading */
.contact-form-card h2{
  margin-bottom: .75rem;
}

/* Labels */
.contact-form-card label{
  display:block;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .2px;
  color: #ffd9ff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  margin: .5rem 0 .35rem;
}

/* Inputs, selects, textareas — bubble look */
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea{
  width: 100%;
  padding: 1rem 1.15rem;
  font-size: 1.05rem;
  border-radius: 999px;                         /* bubble */
  background: linear-gradient(145deg, #ffffff, #ffffff);
  color: #333;
  border: 1px solid #ddd;
  outline: none;
  box-shadow: var(--field-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  transform-origin: center;
  will-change: transform, box-shadow;
}

/* Textarea gets a softer bubble */
.contact-form-card textarea{
  border-radius: 18px;
  min-height: 180px;
  resize: vertical;
  line-height: 1.55;
}

/* Hover micro-lift (kept subtle to avoid layout shift) */
@media (hover:hover){
  .contact-form-card input:hover,
  .contact-form-card select:hover,
  .contact-form-card textarea:hover{
    transform: scale(1.01);
    box-shadow: var(--field-shadow-hover);
  }
}

/* Focus ring + brand tint */
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus{
  border-color: #a074c4;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(130, 88, 180, 0.35);
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Buttons row */
.contact-form-card .actions{
  display:flex;
  justify-content:flex-end;
  gap:.6rem;
  margin-top: 1rem;
}

/* Submit button – keep your gradient, add focus style */
.contact-form-card .submit-btn{
  padding: 1rem 1.8rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: filter .15s ease, transform .12s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .contact-form-card .submit-btn:hover{
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0,0,0,.22);
  }
}
.contact-form-card .submit-btn:focus-visible{
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* Honeypot container stays visually hidden (defensive) */
.contact-form-card [name="hp_field"]{
  /* Input itself (in case CSS from elsewhere leaks) */
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --------- Responsive polish --------- */
@media (max-width: 900px){
  .contact-form-card{
    padding: 1rem 1.1rem 1.25rem;
  }
  .contact-form-card input,
  .contact-form-card select,
  .contact-form-card textarea{
    font-size: 1rem;
    padding: .9rem 1rem;
  }
}

@media (max-width: 520px){
  .contact-form-card label{ font-size: .9rem; }
  .contact-form-card .submit-btn{
    width: 100%;            /* easy taps on small phones */
    justify-content: center;
  }
}