/* -----------------------------------------------------------------------------
File:    01_contact_us_form.css
Path:    /02_forms/01_contact_us_form.css
Version: V1.0
Purpose: Contact form UI (light, clean, screenshot-like)
----------------------------------------------------------------------------- */

.rg-form-card{
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 18px);
}

.rg-form-notice{
  border: 1px solid var(--base-2);
  background: var(--base);
  border-radius: 14px;
  padding: clamp(10px, 1.4vw, 14px);
  margin-bottom: clamp(10px, 1.4vw, 14px);
}

.rg-form{
  display: grid;
  gap: clamp(14px, 1.8vw, 18px);
}

.rg-form-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 16px);
}

@media (max-width: 680px){
  .rg-form-grid-2{ grid-template-columns: 1fr; }
}

.rg-field label{
  display: inline-block;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  margin-bottom: 8px;
  color: var(--contrast);
}

.rg-field input,
.rg-field textarea{
  width: 100%;
  border: 0;
  outline: none;
  border-radius: 10px;
  background: var(--base-2);
  padding: clamp(14px, 1.8vw, 18px);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  color: var(--contrast);
  box-sizing: border-box;
}

.rg-field textarea{
  min-height: 180px;
  resize: vertical;
}

.rg-field input::placeholder{
  color: var(--accent);
  opacity: 0.55;
}

.rg-btn{
  border: 0;
  outline: none;
  cursor: pointer;
  border-radius: 10px;
  padding: clamp(14px, 1.8vw, 18px);
  font-size: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
  width: 100%;
}

.rg-btn-primary{
  background: var(--accent);
  color: var(--base);
}

.rg-btn-primary:hover{
  filter: brightness(0.95);
}

.rg-hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}