/* One-step popup variant, loaded after popup.css by pages whose popup partial is
   partials/popup.he-one-step.html (every field on one screen, a close button and a
   plain title instead of the .mband title band and the stepper).
   Rules from the old Lihyot BeTov inline style block, written with logical properties.
   The old box carried the side padding itself and the form had none; popup.css puts
   it on .form, so this sheet moves it back to the box. Under 768px popup.css also shrinks
   the submit button for the two-step button row; the one-step button stands alone and
   keeps its full size. */

#donate .modal__box { padding: 30px 30px 24px; }
#donate .form { padding: 0; }

/* ---------- close button ---------- */
#donate .modal__x {
    position: absolute; inset-inline-end: 14px; inset-block-start: 12px;
    width: 38px; height: 38px;
    background: none; border: 0; border-radius: 50%;
    font-size: 28px; line-height: 1; color: #6F6F6F; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
#donate .modal__x:hover { background: #F2F2F2; color: #333; }
#donate .modal__x:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* ---------- title ---------- */
#donate .modal__title {
    margin: 0; margin-inline-end: 44px; margin-block-end: 22px;   /* room for the close button */
    font-size: 20px; font-weight: 600; line-height: 1.45;
    color: #111; text-align: start;
}

/* ---------- small screens ---------- */
@media (max-width: 767px) {
    #donate .modal__box { padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
    #donate .modal__title { margin-inline-end: 40px; margin-block-end: 18px; font-size: 18px; }
    #donate .btn--submit { padding: 16px 20px; font-size: 17px; }
}
@media (max-height: 700px) {
    #donate .modal__box { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
    #donate .modal__title { margin-inline-end: 40px; margin-block-end: 12px; font-size: 17px; line-height: 1.35; }
}