.supf-box { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 16px; margin-bottom: 20px; position: relative; }
.supf-box .supf-box-label { position: absolute; top: -10px; left: 16px; background-color: #fff; font-size: 0.75rem; }
.supf-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.supf-field { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 120px; }
.supf-field label { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #333; }
.supf-field input.input-text { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; box-sizing: border-box; }
.supf-btn-wrap { flex: 0 0 auto; }
.supf-btn { white-space: nowrap; padding: 9px 18px !important; line-height: 17px !important; font-size: 14px !important; cursor: pointer; width: 100%; font-weight: 500 !important; background-color: #ddd; }
.supf-msg { margin-top: 10px; font-size: 13px; padding: 6px 10px; border-radius: 3px; }
.supf-msg.supf-ok { background: #eaf7ea; color: #276227; border: 1px solid #b2d9b2; }
.supf-msg.supf-error { background: #fdf0f0; color: #a00; border: 1px solid #f5c0c0; }

@media ( max-width: 479px ) {
    .supf-row { flex-direction: column; }
    .supf-field { flex: 1 1 100%; width: 100%; }
    .supf-btn-wrap { flex: 1 1 100%; width: 100%; }
}

@media ( min-width: 480px ) {
    .supf-field:nth-of-type(2) { min-width: 120px; max-width: 120px; }
}