/* ==========================================================================
   Bonaventure Portfolio — bv-form.css
   Contact form widget. Flush Nexcess Edge CDN after updating.
   ========================================================================== */

:root {
  --bvf-gold:      #DCB064;
  --bvf-gold-lt:   #e8c882;
  --bvf-charcoal:  #26262D;
  --bvf-white:     #ffffff;
  --bvf-serif:     "scotch-text", "Playfair Display", Georgia, serif;
  --bvf-sans:      "rival-sans",  "Jost", system-ui, sans-serif;
  --bvf-transition:0.2s ease;
}

.bvf-wrap { width: 100%; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.bvf-card {
  max-width:    640px;
  margin:       0 auto;
  background:   rgba(255,255,255,.04);
  border:       1px solid rgba(220,176,100,.2);
  border-radius:12px;
  padding:      52px 48px;
  box-sizing:   border-box;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.bvf-eyebrow {
  display:        block;
  font-family:    var(--bvf-sans);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--bvf-gold);
  margin-bottom:  16px;
  text-align:     center;
}

.bvf-title {
  font-family:   var(--bvf-serif);
  font-size:     clamp(24px, 3.5vw, 36px);
  font-weight:   400;
  color:         var(--bvf-white);
  text-align:    center;
  line-height:   1.2;
  margin-bottom: 12px;
}

.bvf-subtitle {
  font-family:   var(--bvf-sans);
  font-size:     clamp(14px, 1.8vw, 16px);
  color:         rgba(255,255,255,.55);
  text-align:    center;
  line-height:   1.7;
  margin-bottom: 36px;
  max-width:     480px;
  margin-left:   auto;
  margin-right:  auto;
}

/* ── Form layout ──────────────────────────────────────────────────────────── */
.bvf-form { width: 100%; }

.bvf-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px;
  margin-bottom:         22px;
}

.bvf-group { margin-bottom: 22px; }
.bvf-row .bvf-group { margin-bottom: 0; }

/* ── Label ────────────────────────────────────────────────────────────────── */
.bvf-label {
  display:        block;
  font-family:    var(--bvf-sans);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          rgba(255,255,255,.5);
  margin-bottom:  8px;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.bvf-input {
  display:           block;
  width:             100%;
  box-sizing:        border-box;
  background:        rgba(255,255,255,.06);
  border:            1px solid rgba(220,176,100,.25);
  border-radius:     5px;
  padding:           13px 16px;
  font-family:       var(--bvf-sans);
  font-size:         14px;
  color:             var(--bvf-white);
  outline:           none;
  transition:        border-color var(--bvf-transition),
                     background   var(--bvf-transition);
  -webkit-appearance:none;
  appearance:        none;
}

.bvf-input::placeholder { color: rgba(255,255,255,.25); }

.bvf-input:focus {
  border-color: var(--bvf-gold);
  background:   rgba(220,176,100,.06);
}

/* Select arrow */
.bvf-input[type="url"],
select.bvf-input {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23DCB064' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  padding-right:       40px;
}

select.bvf-input option {
  background: var(--bvf-charcoal);
  color:      var(--bvf-white);
}

textarea.bvf-input {
  resize:     vertical;
  min-height: 120px;
  line-height:1.6;
}

/* ── Honeypot (invisible) ─────────────────────────────────────────────────── */
/* Parent must be position:relative (set on .bvf-form below) to contain this */
.bvf-form { position: relative; }

.bvf-hp {
  position:   absolute;
  left:       -9999px;
  top:        0;
  width:      1px;
  height:     1px;
  overflow:   hidden;
  visibility: hidden;
  pointer-events: none;
}

/* ── Status message ───────────────────────────────────────────────────────── */
.bvf-status {
  margin-bottom: 16px;
  font-family:   var(--bvf-sans);
  font-size:     14px;
  text-align:    center;
  min-height:    0;
  transition:    opacity 0.2s;
}

.bvf-status:empty { display: none; }

.bvf-status--success {
  color:         #6ee7a8;
  background:    rgba(110,231,168,.08);
  border:        1px solid rgba(110,231,168,.25);
  border-radius: 5px;
  padding:       12px 16px;
}

.bvf-status--error {
  color:         #fca5a5;
  background:    rgba(252,165,165,.08);
  border:        1px solid rgba(252,165,165,.2);
  border-radius: 5px;
  padding:       12px 16px;
}

/* ── Submit button ────────────────────────────────────────────────────────── */
.bvf-submit {
  display:        block;
  width:          100%;
  background:     var(--bvf-gold);
  border:         none;
  color:          var(--bvf-charcoal);
  font-family:    var(--bvf-sans);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding:        17px;
  border-radius:  3px;
  cursor:         pointer;
  transition:     background var(--bvf-transition),
                  transform  var(--bvf-transition),
                  opacity    var(--bvf-transition);
  margin-top:     8px;
}

.bvf-submit:hover:not(:disabled) {
  background: var(--bvf-gold-lt);
  transform:  translateY(-2px);
}

.bvf-submit:disabled,
.bvf-submit.is-loading {
  opacity: 0.65;
  cursor:  not-allowed;
  transform: none;
}

/* ── Note ─────────────────────────────────────────────────────────────────── */
.bvf-note {
  text-align:  center;
  font-family: var(--bvf-sans);
  font-size:   12px;
  color:       rgba(255,255,255,.3);
  margin-top:  16px;
  line-height: 1.6;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bvf-card { padding: 44px 36px; }
}

@media (max-width: 640px) {
  .bvf-card { padding: 36px 24px; }
  .bvf-row  { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .bvf-card     { padding: 28px 18px; border-radius: 8px; }
  .bvf-title    { font-size: clamp(20px, 7vw, 28px); }
  .bvf-subtitle { font-size: 14px; margin-bottom: 24px; }
  .bvf-group    { margin-bottom: 18px; }
  .bvf-input    { font-size: 16px; } /* prevent iOS auto-zoom on focus */
}