/*
 * Designer door: the "For designers" section on Sell with us and the role choice on the sign-up page.
 * Loaded together with designer.css, which holds the shared .dz tokens, buttons and type.
 * Every rule here is scoped under .dz-door so nothing else on the site changes.
 * Text is 16px or more, targets are 44px or more, status is words plus an icon.
 */
.dz-door [hidden] { display: none !important; }

/* Sell with us: the designer section */
.dz-door .dz-wrap { padding-top: 24px; padding-bottom: 8px; }
.dz-door .dz-can { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--dz-rule); align-items: flex-start; }
.dz-door .dz-can-ico { flex: none; width: 28px; height: 28px; margin-top: 2px; color: var(--dz-ink); }
.dz-door .dz-can b { display: block; font: 700 17px/24px Montserrat, Arial, sans-serif; color: var(--dz-ink); }
.dz-door .dz-can span.dz-can-txt { display: block; font: 500 16px/24px Montserrat, Arial, sans-serif; color: var(--dz-ink-2); margin-top: 2px; }
.dz-door ul.dz-cans, .dz-door ol.dz-steps { list-style: none; margin: 0; padding: 0; }
.dz-door ol.dz-steps { counter-reset: dzstep; }
.dz-door ol.dz-steps li { counter-increment: dzstep; display: flex; gap: 14px; padding: 14px 0; align-items: flex-start; }
.dz-door ol.dz-steps li::before { content: counter(dzstep); flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--dz-edge); display: flex; align-items: center; justify-content: center; font: 700 16px Montserrat, Arial, sans-serif; color: var(--dz-ink); }
.dz-door ol.dz-steps b { display: block; font: 700 17px/24px Montserrat, Arial, sans-serif; color: var(--dz-ink); }
.dz-door ol.dz-steps span { display: block; font: 500 16px/24px Montserrat, Arial, sans-serif; color: var(--dz-ink-2); }
@media (min-width: 992px) {
  .dz-door .dz-wrap { padding-top: 40px; padding-bottom: 16px; }
  .dz-door .dz-intro { max-width: 720px; }
  .dz-door ul.dz-cans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
}
/* The two buttons use .dz-bar from designer.css: sticky at the bottom of a phone while the section is on screen, in the page on a desktop */
.dz-door--section { padding-bottom: 0; }
.dz-door .dz-maker-head { margin: 0 0 8px; }

/* Sign-up page: the role choice sits inside the older form, so it is made to win over .slickForm rules */
.dz-door.dz-door--inline { background: transparent; padding-bottom: 0; font-size: 16px; line-height: 24px; }
.dz-door.dz-door--inline .dz-roles { border: 0; margin: 0; padding: 0; min-width: 0; }
.dz-door.dz-door--inline .dz-roles legend { display: block; width: auto; border: 0; margin: 0 0 4px; padding: 0; font: 700 17px/24px Montserrat, Arial, sans-serif; color: var(--dz-ink); text-transform: none; letter-spacing: 0; }
.dz-door.dz-door--inline .dz-roles .dz-err { margin: 6px 0 10px; }
.dz-door.dz-door--inline .dz-roles .dz-role { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 0 14px; min-height: 56px; border: 1px solid var(--dz-edge); border-radius: 4px; background: var(--dz-card); }
.dz-door.dz-door--inline .dz-roles .dz-role:has(input:checked) { border-color: var(--dz-ink); box-shadow: inset 0 0 0 1px var(--dz-ink); }
.dz-door.dz-door--inline .dz-roles .dz-role:has(input:focus-visible) { outline: 2px solid var(--dz-focus); outline-offset: 2px; }
.dz-door.dz-door--inline .dz-roles .dz-role input[type=checkbox] { flex: none; width: 24px; height: 24px; margin: 16px 0 0; position: static; }
.dz-door.dz-door--inline .dz-roles .dz-role label { flex: 1; display: block; margin: 0; padding: 12px 0; min-height: 44px; cursor: pointer; text-transform: none; letter-spacing: 0; font: 700 17px/24px Montserrat, Arial, sans-serif; color: var(--dz-ink); }
.dz-door.dz-door--inline .dz-roles .dz-role label b { display: block; font: 700 17px/24px Montserrat, Arial, sans-serif; }
.dz-door.dz-door--inline .dz-roles .dz-role label span { display: block; width: auto; margin: 2px 0 0; text-transform: none; letter-spacing: 0; font: 500 16px/24px Montserrat, Arial, sans-serif; color: var(--dz-ink-2); }
.dz-door.dz-door--inline .dz-next { margin: 16px 0 0; }
.dz-door.dz-door--inline .dz-next-title { font: 700 17px/24px Montserrat, Arial, sans-serif; margin: 0 0 6px; text-transform: none; letter-spacing: 0; color: var(--dz-ink); }
.dz-door.dz-door--inline .dz-next-list { list-style: none; margin: 0; padding: 0; counter-reset: dznext; }
.dz-door.dz-door--inline .dz-next-list li { counter-increment: dznext; display: flex; gap: 12px; padding: 8px 0; align-items: flex-start; }
.dz-door.dz-door--inline .dz-next-list li::before { content: counter(dznext); flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--dz-edge); display: flex; align-items: center; justify-content: center; font: 700 16px Montserrat, Arial, sans-serif; }
.dz-door.dz-door--inline .dz-next-list b { display: block; font: 700 16px/24px Montserrat, Arial, sans-serif; }
.dz-door.dz-door--inline .dz-next-list span { display: block; font: 500 16px/24px Montserrat, Arial, sans-serif; color: var(--dz-ink-2); }