.bitrow-form-host {
--bitrow-primary: #1d4ed8;
--bitrow-primary-text: #fff; --bitrow-focus-ring: #111827;
}
.bitrow-form-wrapper {
max-width: 640px;
margin: 0 auto;
font-family: inherit;
color: #1a1a1a;
position: relative;
transition: opacity 0.15s ease;
}
.bitrow-form-wrapper.is-loading {
opacity: 0.55;
pointer-events: none;
}
.bitrow-form-wrapper.is-loading::after {
content: "";
position: absolute;
top: 12px;
right: 12px;
width: 18px;
height: 18px; border: 2px solid #64748b;
border-top-color: var(--bitrow-primary, #1d4ed8);
border-radius: 50%;
animation: bitrow-form-spin 0.7s linear infinite;
}
@keyframes bitrow-form-spin {
to { transform: rotate(360deg); }
}
.bitrow-form-wrapper h2 {
margin: 0 0 .75rem;
font-size: 1.5rem;
line-height: 1.25;
}
.bitrow-intro {
margin: 0 0 1.25rem;
color: #333;
} .bitrow-live-region {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
word-wrap: normal;
}
.bitrow-form-host {
position: relative;
}
.bitrow-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
word-wrap: normal;
}
.bitrow-success {
background: #e7f5ec;
border-left: 4px solid #1f7a3f;
color: #0e3d1f;
padding: .75rem 1rem;
margin: 0 0 1rem;
}
.bitrow-success p {
margin: 0;
}
.bitrow-error-summary {
background: #fdecea;
border-left: 4px solid #b3261e;
color: #5b1310;
padding: .75rem 1rem;
margin: 0 0 1rem;
}
.bitrow-error-summary p {
margin: 0;
}
.bitrow-success:focus,
.bitrow-error-summary:focus,
.bitrow-form-wrapper h2:focus {
outline: 3px solid var(--bitrow-focus-ring, #111827);
outline-offset: 2px;
}
.bitrow-success:focus:not(:focus-visible),
.bitrow-error-summary:focus:not(:focus-visible),
.bitrow-form-wrapper h2:focus:not(:focus-visible) {
outline: none;
}
.bitrow-success-note {
margin: 0 0 1rem;
color: #333;
font-size: .95rem;
}
.bitrow-field-error {
display: block;
margin-top: 4px;
color: #b3261e;
font-size: .9rem;
line-height: 1.4;
}
.bitrow-field.has-error label {
color: #5b1310;
}
.bitrow-field input[aria-invalid="true"],
.bitrow-field select[aria-invalid="true"],
.bitrow-field textarea[aria-invalid="true"] {
border-color: #b3261e;
background-color: #fff8f7;
box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.15);
}
.bitrow-field input[aria-invalid="true"]:focus,
.bitrow-field select[aria-invalid="true"]:focus,
.bitrow-field textarea[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.30);
}
.bitrow-fieldset { border: 1px solid #6b7280;
border-radius: 4px;
padding: 1rem 1.25rem;
margin: 0 0 1.25rem;
}
.bitrow-fieldset > legend {
font-weight: 600;
padding: 0 .5rem;
}
.bitrow-field {
display: flex;
flex-direction: column;
gap: .25rem;
margin: 0 0 1rem;
}
.bitrow-field:last-child {
margin-bottom: 0;
}
.bitrow-field label {
font-weight: 500;
}
.bitrow-required {
color: #b3261e;
}
.bitrow-field input,
.bitrow-field select,
.bitrow-field textarea {
font: inherit;
color: inherit;
background: #fff;
border: 1px solid #6b7280;
border-radius: 4px;
padding: .55rem .65rem;
min-height: 2.5rem;
}
.bitrow-field input:focus-visible,
.bitrow-field select:focus-visible,
.bitrow-field textarea:focus-visible,
.bitrow-button:focus-visible {
outline: 3px solid var(--bitrow-focus-ring, #111827);
outline-offset: 2px;
border-color: var(--bitrow-primary, #1d4ed8);
}
.bitrow-help {
color: #4b5563;
font-size: .9rem;
}
.bitrow-items-note {
margin: 0;
}
.bitrow-submit {
margin: 1.25rem 0 0;
}
.bitrow-button {
font: inherit;
font-weight: 600;
background: var(--bitrow-primary, #1d4ed8);
color: var(--bitrow-primary-text, #fff);
border: 0;
border-radius: 4px;
padding: .75rem 1.25rem;
min-height: 2.75rem;
cursor: pointer;
} .bitrow-button:hover {
background: #1e40af;
background: color-mix( in srgb, var(--bitrow-primary, #1d4ed8) 85%, #000 );
}
.bitrow-disclaimer {
margin: 1.5rem 0 0;
color: #4b5563;
font-size: .85rem;
border-top: 1px solid #e5e7eb;
padding-top: .75rem;
}
.bitrow-items-table {
width: 100%;
border-collapse: collapse;
margin: .5rem 0 0;
}
.bitrow-items-table th,
.bitrow-items-table td {
padding: .55rem .5rem;
border-bottom: 1px solid #e5e7eb;
text-align: left;
vertical-align: middle;
}
.bitrow-items-table thead th {
font-weight: 600;
background: #f6f7f7;
}
.bitrow-items-table__num {
text-align: right;
width: 6rem;
white-space: nowrap;
}
.bitrow-items-table input[type="number"] {
width: 4.5rem;
min-height: 2.25rem;
text-align: right;
font: inherit;
border: 1px solid #6b7280;
border-radius: 4px;
padding: .35rem .5rem;
}
.bitrow-items-table input[type="number"]:focus-visible {
outline: 3px solid var(--bitrow-focus-ring, #111827);
outline-offset: 2px;
border-color: var(--bitrow-primary, #1d4ed8);
}
.bitrow-cancel-form {
margin: 1rem 0 0;
}
.bitrow-button-link {
font: inherit;
background: transparent;
border: 0;
color: var(--bitrow-primary, #1d4ed8);
text-decoration: underline;
cursor: pointer;
padding: .25rem .25rem;
}
.bitrow-button-link:focus-visible {
outline: 3px solid var(--bitrow-focus-ring, #111827);
outline-offset: 2px;
border-radius: 4px;
}
@media (max-width: 480px) {
.bitrow-fieldset {
padding: .75rem .9rem;
}
.bitrow-items-table th,
.bitrow-items-table td {
padding: .4rem .35rem;
}
}