/* Basic UI mirip contoh: input bundar, grid 3-2-1 */
.vwf-form { --vwf-radius: 999px; --vwf-gap: 16px; --vwf-border: #cfd6de; --vwf-btn:#121145; --vwf-btn-txt:#fff; }
.vwf-title { font-weight:600; margin-bottom: 10px; }
.vwf-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--vwf-gap); align-items:center; }
.vwf-grid-top { margin-bottom: 8px; }
.vwf-field {}
.vwf-input, .vwf-select {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--vwf-border);
	border-radius: var(--vwf-radius);
	outline: none;
	background: #fff;
	box-shadow: 0 0 0 rgba(0,0,0,0);
	transition: box-shadow .15s ease, border-color .15s ease;
}
.vwf-input:focus, .vwf-select:focus { border-color:#96a3b1; box-shadow:0 0 0 4px rgba(0,0,0,.03); }
.vwf-actions { grid-column: 3 / 4; }
.vwf-button {
	width: 100%;
	padding: 14px 24px;
	border-radius: var(--vwf-radius);
	border:none;
	background: var(--vwf-btn);
	color: var(--vwf-btn-txt);
	font-weight:700;
	cursor:pointer;
	transition: transform .06s ease, opacity .2s ease;
}
.vwf-button:active { transform: translateY(1px); }
@media (max-width: 900px) {
  .vwf-grid { grid-template-columns: 1fr 1fr; }
  .vwf-actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .vwf-grid { grid-template-columns: 1fr; }
}
/* accessibility */
.screen-reader-text { position:absolute!important; height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap; }


/* === Mobile uniform sizing === */
.vwf-input, .vwf-select {
  box-sizing: border-box;
  min-height: 48px;
  font-size: 16px; /* avoid iOS zoom */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
@media (max-width: 560px) {
  .vwf-grid { grid-template-columns: 1fr; gap: 12px; }
  .vwf-field, .vwf-actions { width: 100%; }
  .vwf-input, .vwf-select { width: 100%; min-height: 50px; }
  .vwf-button { width: 100%; min-height: 50px; }
  .vwf-grid-top { margin-bottom: 12px; }
}