/* ============================================================
   Contact — La Belle Beauté
   Formulier + contactgegevens-aside. (Locaties gebruiken het
   bestaande .locs/.loc-component.) Laadt alleen op de contactpagina.
   ============================================================ */

.contact-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(36px,5vw,72px); align-items:start; }
@media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }

/* ---------- Formulier ---------- */
.form { display:flex; flex-direction:column; gap:18px; }
.form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:520px){ .form .row2{ grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe); }
.field input, .field select, .field textarea {
  font-family:    var(--ff-sans);
  font-size:      1rem;
  color:          var(--black);
  background:     var(--white);
  border:         1px solid var(--line-cream);
  border-radius:  var(--radius);
  padding:        .95em 1.1em;
  transition:     border-color .3s, box-shadow .3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:      none;
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(213,169,64,.14);
}
.field textarea { min-height:150px; resize:vertical; }

/* Custom dropdown-pijl (native pijl staat te ver naar rechts) */
.field select,
.form--gf select {
  appearance:            none;
  -webkit-appearance:    none;
  -moz-appearance:       none;
  background-image:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23775C4B' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:     no-repeat;
  background-position:   right 1.1em center;
  background-size:       12px 8px;
  padding-right:         2.8em;
}
.form .btn { align-self:flex-start; margin-top:4px; }
.form__note { font-size:.8rem; color:var(--taupe-soft); max-width:46ch; }

/* Succes-bevestiging (fallback zonder plugin) */
.form__ok { display:none; text-align:center; padding:48px 30px; border:1px solid var(--line-cream); border-radius:var(--radius); background:var(--white); }
.form__ok.show { display:block; }
.form__ok .ok-ic { width:58px; height:58px; border-radius:50%; background:var(--gold); color:var(--black); display:grid; place-items:center; font-size:1.6rem; margin:0 auto 18px; }
.form__ok h3 { font-size:1.6rem; color:var(--black); margin-bottom:.4em; }
.form__ok p { color:var(--taupe); }

/* ---------- Contactgegevens-aside ---------- */
.contact-aside .c-blk { padding:20px 0; border-top:1px solid var(--line-cream); }
.contact-aside .c-blk:first-child { border-top:none; padding-top:0; }
.contact-aside h3 { font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:.6em; }
.contact-aside p { color:var(--taupe); font-size:1rem; }
.contact-aside a:hover { color:var(--copper); }

/* ============================================================
   Gravity Forms skin — laat GF-velden aansluiten op het ontwerp
   ============================================================ */
.form--gf .gform_wrapper { margin: 0; }

/* 1. Orbital-theme variabelen overschrijven — GF's eigen regels nemen deze over,
      dus geen specificiteitsgevecht nodig. */
.form--gf .gform_wrapper.gform-theme--orbital {
  --gf-color-primary:              var(--gold);
  --gf-color-primary-rgb:          213,169,64;
  --gf-color-primary-contrast:     var(--black);
  --gf-color-primary-contrast-rgb: 35,31,32;
  --gf-color-primary-darker:       var(--gold-soft);
  --gf-color-primary-lighter:      var(--gold-soft);
  --gf-ctrl-bg-color:              var(--white);
  --gf-ctrl-color:                 var(--black);
  --gf-ctrl-border-color:          var(--line-cream);
  --gf-ctrl-border-color-hover:    var(--copper);
  --gf-ctrl-border-color-focus:    var(--gold);
  --gf-ctrl-radius:                var(--radius);
  --gf-label-color-primary:        var(--taupe);
}

/* 2. Gerichte overrides (wrapper-class meegenomen voor voldoende specificiteit).
      GF regelt zelf de 2-koloms grid via gfield--width-half. */
.form--gf .gform_wrapper.gform-theme--orbital .gfield_label {
  font-family:    var(--ff-sans);
  font-weight:    400;
  font-size:      .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--taupe);
}
.form--gf .gform_wrapper.gform-theme--orbital .gfield_required { color: var(--copper); font-weight: 400; }

.form--gf .gform_wrapper.gform-theme--orbital input:not([type=submit]):not([type=button]),
.form--gf .gform_wrapper.gform-theme--orbital select,
.form--gf .gform_wrapper.gform-theme--orbital textarea {
  font-family:   var(--ff-sans);
  font-size:     1rem;
  color:         var(--black);
  background:    var(--white);
  border:        1px solid var(--line-cream);
  border-radius: var(--radius);
  padding:       1.15em 1.2em;
}
.form--gf .gform_wrapper.gform-theme--orbital input:focus,
.form--gf .gform_wrapper.gform-theme--orbital select:focus,
.form--gf .gform_wrapper.gform-theme--orbital textarea:focus {
  outline:      none;
  border-color: var(--gold);
  box-shadow:   0 0 0 3px rgba(213,169,64,.14);
}
.form--gf .gform_wrapper.gform-theme--orbital textarea { height: 150px; min-height: 110px; resize: vertical; }

/* Eigen dropdown-pijl (native pijl te ver naar rechts) */
.form--gf .gform_wrapper.gform-theme--orbital select {
  appearance:          none;
  -webkit-appearance:  none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23775C4B' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 1.1em center;
  background-size:     12px 8px;
  padding-right:       2.8em;
}

/* Verstuur-knop — GF zet de kleur met hoge specificiteit/inline, dus forceren */
.form--gf .gform_wrapper.gform-theme--orbital .gform_footer .gform_button {
  font-family:    var(--ff-sans);
  font-weight:    500;
  font-size:      .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding:        1.05em 2.1em !important;
  border:         none !important;
  border-radius:  2px !important;
  background:     var(--gold) !important;
  color:          var(--black) !important;
  cursor:         pointer;
  transition:     background .45s var(--ease), transform .45s var(--ease);
}
.form--gf .gform_wrapper.gform-theme--orbital .gform_footer .gform_button:hover { background: var(--gold-soft) !important; transform: translateY(-2px); }

/* Bevestiging + validatie */
.form--gf .gform_confirmation_message { color: var(--black); font-size: 1.1rem; }
.form--gf .gform_wrapper.gform-theme--orbital .gfield_validation_message,
.form--gf .gform_wrapper.gform-theme--orbital .validation_message {
  color: #b3261e; font-size: .85rem; background: none; border: none; padding: 0;
}