:root{
  --vlk-bg:#fff;
  --vlk-text:#111827;
  --vlk-muted:#6b7280;
  --vlk-border:#d1d5db;
  --vlk-border-focus:#9ca3af;
  --vlk-btn:#b10f1d;
  --vlk-btn-hover:#960b17;
  --vlk-radius:6px;
  --vlk-gap:18px;
}

.vlk-vjf-wrap,
.vlk-vjf-wrap *{ box-sizing:border-box; }

.vlk-vjf-wrap{
  margin:0;
  padding:0; /* ты контролируешь ширину внешним wrap'ом */
  color:var(--vlk-text);
  font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Reference "wrap" look */
.vlk-vjf-form{
  /*background:var(--vlk-bg);*/
  /*padding:24px;*/
  /*border:1px solid #eee;*/
  /*border-radius:10px;*/
}

/* ====== GRID: left (fluid) + right (fixed) ====== */
.vlk-vjf-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 420px; /* ✅ right always same */
  gap: var(--vlk-gap);
  align-items:start;
}

@media (max-width: 980px){
  .vlk-vjf-grid{ grid-template-columns: 1fr; }
}

.vlk-vjf-col{ min-width:0; }

.vlk-vjf-label{
  display:block;
  margin:0 0 6px;
  font-weight:500;
}

.vlk-vjf-control{
  width:100%;
  border:1px solid var(--vlk-border);
  border-radius:var(--vlk-radius);
  background:#fff;
  padding:10px 12px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  font-size:14px;
}

.vlk-vjf-control:focus{
  border-color: var(--vlk-border-focus);
  box-shadow: 0 0 0 3px rgba(17,24,39,.06);
}

/* select arrow like reference */
select.vlk-vjf-control{
  padding-right: 40px;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    100% 0;
  background-size:
    6px 6px,
    6px 6px,
    2.5em 2.5em;
  background-repeat:no-repeat;
}

/* ===== LEFT: rows with different field widths ===== */
.vlk-vjf-row{
  display:grid;
  gap:10px;
  margin-bottom: var(--vlk-gap);
}

.vlk-vjf-row--r1{
  grid-template-columns: 140px 1fr 1fr; /* Title narrow + First + Last */
  align-items:start;
}

.vlk-vjf-row--r2{
  grid-template-columns: 1fr 200px 1fr; /* Phone wide + State narrow + Email wide */
  align-items:start;
}

@media (max-width: 640px){
  .vlk-vjf-row--r1,
  .vlk-vjf-row--r2{
    grid-template-columns: 1fr;
  }
}

/* simple spacing blocks */
.vlk-vjf-mb{ margin-bottom: var(--vlk-gap); }

/* RIGHT column */
.vlk-vjf-rightblock{ margin-bottom: var(--vlk-gap); }

.vlk-vjf-textarea{
  min-height: 180px;
  resize: vertical;
}

/* checkboxes like reference */
.vlk-vjf-checks{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 8px;
}

.vlk-vjf-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#374151;
}

.vlk-vjf-check input{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color: var(--vlk-btn);
}

.vlk-vjf-check span{ line-height:1.35; }

.vlk-vjf-link{
  color:#111827;
  text-decoration:underline;
}

.vlk-vjf-actions{ margin-top: 18px; }

.vlk-vjf-btn{
  border:0;
  border-radius:999px;
  padding:11px 18px;
  background:var(--vlk-btn);
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  text-transform:uppercase;
  font-size:12px;
  transition: background .15s, transform .03s;
}

.vlk-vjf-btn:hover{ background:var(--vlk-btn-hover); }
.vlk-vjf-btn:active{ transform: translateY(1px); }