.guest-subscription-role { padding-top: 16px; text-align: center; }
.guest-subscription-role > .btn { padding: 8px 16px; font-size: 13px; }
.guest-role-dialog { box-sizing: border-box; width: min(900px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 40px 32px; border: 0; border-radius: var(--radius); background-color: var(--white); color: var(--main); text-align: center; }
/* Same dimming as the shared .modal in css/components/modal.css. */
.guest-role-dialog::backdrop { background-color: rgba(31, 31, 32, 0.649); }

/* Role buttons use the registration markup and dimensions. */
.guest-role-dialog .choose_role { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.guest-role-dialog .choose_role .btn { display: flex; text-transform: none; color: var(--main); min-width: 250px; max-width: 250px; text-align: center; font-size: 17px; font-weight: var(--main_weight); }
.guest-role-dialog .choose_role h3 { font-family: var(--main_font); font-size: 20px; font-weight: var(--main_bolder_weight); }
.guest-role-dialog .choose_role .btn img { width: 100%; }
.guest-role-dialog .choose_role p { color: var(--secondary); margin-top: 10px; font-size: inherit; }
/* Match the selected role card on registration. */
.guest-role-dialog .choose_role .btn.active,
.guest-role-dialog .choose_role .btn.active h3,
.guest-role-dialog .choose_role .btn.active p { color: var(--blue_text); }
.guest-role-dialog .choose_role .btn.active::before { background-color: var(--lightblue); border-color: var(--blue_border); box-shadow: 0 2px 0 var(--blue_border); }
.subscription-page.guest-parent-role .subscription-children { display: contents !important; }

@media (max-width: 700px) {
    .guest-role-dialog { padding: 24px 15px; }
    .guest-role-dialog .choose_role .btn { flex-direction: row; text-align: left; gap: 24px; min-width: 100%; max-width: 100%; align-items: center; }
    .guest-role-dialog .choose_role p { margin-top: 5px; }
    .guest-role-dialog .choose_role img { max-width: 120px; min-width: 120px; }
}
@media (max-width: 500px) {
    .guest-role-dialog .choose_role .btn { gap: 15px; padding: 11px; font-size: 16px; }
    .guest-role-dialog .choose_role img { max-width: 100px; min-width: 100px; }
}