/* Shared form layout for public forms and the staff application. */
.phone-field .phone-controls,
.signup-phone-field .phone-controls { direction:ltr; }
/* Keep Arabic labels and country names in their reading direction; only the columns stay left-to-right. */
:root[dir="rtl"] .phone-controls > :is(div,label) { direction:rtl; }
:root[dir="ltr"] .phone-controls > :is(div,label) { direction:ltr; }

:is(label, .billing-form label, .form-options label, .notification-settings-fields label, .support-form label):has(> input[type="checkbox"]) {
    display:grid;
    grid-template-columns:18px minmax(0,1fr);
    grid-auto-flow:row;
    align-items:start;
    align-content:center;
    justify-content:start;
    column-gap:10px;
    row-gap:6px;
    min-width:0;
    max-width:100%;
    min-height:44px;
    margin:0;
    padding-block:8px;
    font-size:14px;
    font-weight:600;
    line-height:1.6;
    text-align:start;
    overflow-wrap:anywhere;
    cursor:pointer;
}
input[type="checkbox"] {
    box-sizing:border-box;
    appearance:auto;
    accent-color:#bc422e;
    width:18px;
    height:18px;
    min-width:18px;
    min-height:18px;
    max-width:18px;
    max-height:18px;
    padding:0;
    margin:0;
    border-radius:4px;
    flex:0 0 18px;
    vertical-align:middle;
    cursor:pointer;
}
:is(label, .billing-form label, .form-options label, .notification-settings-fields label, .support-form label):has(> input[type="checkbox"]) > input[type="checkbox"] {
    grid-column:1;
    grid-row:1;
    justify-self:start;
    align-self:start;
    margin-block-start:calc((1.6em - 18px) / 2);
    margin-inline:0;
}
:is(label, .billing-form label, .form-options label, .notification-settings-fields label, .support-form label):has(> input[type="checkbox"]) > :not(input) {
    min-width:0;
    margin:0;
}
input[type="checkbox"]:focus-visible { outline:2px solid #bc422e;outline-offset:3px; }
input[type="checkbox"]:disabled { cursor:not-allowed;opacity:.55; }
/* Consecutive options remain distinct, including options generated in fieldsets. */
label:has(> input[type="checkbox"]) + label:has(> input[type="checkbox"]) { margin-block-start:4px; }
.billing-form > label:has(> input[type="checkbox"]) + label:has(> input[type="checkbox"]) { margin-block-start:0; }