.rfield { display: flex; flex-direction: column; gap: 4px; width: 100%; } .rfield__label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 12px; color: #4a5565; margin: 0; } .rfield__required { color: var(--color-canon-red); margin-left: 2px; } .rfield__control { position: relative; } .rfield__input, .rfield__select { width: 100%; height: 41.6px; padding: 10px 12px; border: 0.8px solid #d1d5dc; border-radius: 6px; background: var(--color-white); font-family: var(--font-body); font-size: 14px; color: var(--color-black); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .rfield__input::placeholder { color: #99a1af; } .rfield__input[readonly] { background-color: #f9fafb; color: var(--color-text-muted); } .rfield__input:hover, .rfield__select:hover { border-color: #9ca3af; } .rfield__input:focus-visible, .rfield__select:focus-visible { outline: none; border-color: var(--color-canon-red); box-shadow: 0 0 0 3px var(--color-canon-red-soft); } .rfield__input.invalid, .rfield__select.invalid { border-color: var(--color-canon-red); background-color: var(--color-canon-red-soft); } .rfield__error { display: flex; align-items: center; gap: 4px; margin: 0; font-family: var(--font-body); font-size: 11px; color: var(--color-canon-red); } .rfield__error i { font-size: 13px; flex-shrink: 0; } .rfield__select { appearance: none; padding-right: 36px; cursor: pointer; } .rfield__select:disabled { background: #f9fafb; color: #9ca3af; cursor: not-allowed; } .rfield__chevron { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 12px; color: #6a7282; pointer-events: none; } .rfield__toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--radius-full); background: transparent; color: #919498; font-size: 1.1rem; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .rfield__toggle:hover { background-color: var(--color-bg); color: var(--color-text-dark, var(--color-black)); } .rfield__hints { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 12px; list-style: none; border: 1px solid #f3f4f6; border-radius: 8px; background: #f9fafb; font-family: var(--font-body); font-size: 12px; color: #4a5565; } .rfield__hint { display: flex; align-items: center; gap: 6px; } .rfield__hint-icon { color: #d1d5db; font-size: 14px; flex-shrink: 0; transition: color var(--duration-fast) var(--ease-out); } .rfield__hint.is-valid { color: #101828; } .rfield__hint.is-valid .rfield__hint-icon { color: #16a34a; } .rfield-row { display: grid; gap: 12px; } .rfield-row--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rfield-row--phone { grid-template-columns: 90px minmax(0, 1fr); }