/* Public signup looks chosen under Customer Signup settings. */

.signup-look {
    --signup-bg: #e7f7f8;
    --signup-ink: #10233d;
    --signup-muted: #5d6d7e;
    --signup-accent: #0e7388;
    --signup-accent-deep: #14384c;
    --signup-icon-bg: #e5f6f2;
    --signup-icon: #12856f;
    --signup-line: #d5e3e8;
    --signup-card-shadow: 0 10px 28px rgba(16, 72, 88, 0.07);
    --signup-radius: 22px;
    --signup-btn-radius: 999px;
    color: var(--signup-ink);
    font-family: Inter, system-ui, sans-serif;
}

.signup-look--soft {
    --signup-bg: #eef0fb;
    --signup-ink: #1c1848;
    --signup-muted: #667089;
    --signup-accent: #3d55d8;
    --signup-accent-deep: #5b4cdb;
    --signup-icon-bg: #eef2ff;
    --signup-icon: #4f46e5;
    --signup-line: #ddd9f5;
    --signup-card-shadow: 0 14px 34px rgba(79, 70, 229, 0.08);
    --signup-radius: 20px;
    --signup-btn-radius: 14px;
}

.signup-look--bold {
    --signup-bg: #f6f8fb;
    --signup-ink: #0c2148;
    --signup-muted: #64748b;
    --signup-accent: #2563eb;
    --signup-accent-deep: #1d4ed8;
    --signup-icon-bg: #eff6ff;
    --signup-icon: #2563eb;
    --signup-line: #e2e8f0;
    --signup-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    --signup-radius: 18px;
    --signup-btn-radius: 12px;
}

.signup-layout:has(.signup-look--fresh) {
    background: #e7f7f8;
}

.signup-layout:has(.signup-look--fresh)::before {
    opacity: 1;
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.95) 0 3px, transparent 4px),
        radial-gradient(circle at 92% 22%, rgba(255, 255, 255, 0.9) 0 4px, transparent 5px),
        radial-gradient(circle at 18% 78%, rgba(125, 211, 192, 0.55) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 70%, rgba(255, 255, 255, 0.85) 0 2px, transparent 3px),
        linear-gradient(180deg, #e7f7f8 0%, #f3fbfc 70%, #f7fcfd 100%);
}

.signup-layout:has(.signup-look--soft) {
    background: #eef0fb;
}

.signup-layout:has(.signup-look--soft)::before {
    opacity: 1;
    background:
        radial-gradient(circle at 8% 8%, rgba(196, 181, 253, 0.55) 0 70px, transparent 72px),
        radial-gradient(circle at 96% 4%, rgba(191, 219, 254, 0.7) 0 90px, transparent 92px),
        radial-gradient(circle at 92% 88%, rgba(221, 214, 254, 0.65) 0 80px, transparent 82px),
        radial-gradient(circle at 4% 80%, rgba(224, 231, 255, 0.8) 0 60px, transparent 62px),
        linear-gradient(180deg, #f4f2ff 0%, #eef1fb 100%);
}

.signup-layout:has(.signup-look--bold) {
    background: #f6f8fb;
}

.signup-layout:has(.signup-look--bold)::before {
    opacity: 1;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(191, 219, 254, 0.85) 0%, rgba(219, 234, 254, 0.35) 28%, transparent 46%),
        linear-gradient(180deg, #f8fbff 0%, #f6f8fb 100%);
}

.signup-layout:has(.signup-look) .public-footer {
    background: transparent;
    border-top-color: transparent;
}

.signup-look.signup-shell {
    padding-top: 1.6rem;
    padding-bottom: 2.5rem;
}

.signup-look .signup-shell__container {
    max-width: 560px !important;
}

.signup-look .signup-shell__panel {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.signup-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
}

.signup-look--soft .signup-brand {
    flex-direction: column;
    text-align: center;
    gap: 8px;
}

.signup-brand__logo,
.signup-brand__mark {
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex-shrink: 0;
}

.signup-brand__mark {
    display: grid;
    place-items: center;
}

.signup-brand__name {
    font-family: "Inter Tight", Inter, sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--signup-ink);
}

.signup-brand__tag {
    margin-top: 2px;
    color: var(--signup-muted);
    font-size: 0.95rem;
}

.signup-look--soft .signup-brand__tag,
.signup-look--bold .signup-brand__tag {
    display: none;
}

.signup-progress {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
}

.signup-look--soft .signup-progress {
    justify-content: center;
}

.signup-progress__track {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.signup-look--soft .signup-progress__track {
    flex: 0 1 460px;
}

.signup-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
}

.signup-progress__dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.86rem;
    background: #e6eef2;
    color: #94a3b8;
}

.signup-progress__dot.is-done {
    background: #3dcc6f;
    color: #fff;
}

.signup-progress__dot.is-current {
    background: var(--signup-accent-deep);
    color: #fff;
}

.signup-look--fresh .signup-progress__dot.is-current {
    background: #14384c;
}

.signup-progress__label {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
}

.signup-progress__label.is-current {
    color: var(--signup-accent-deep);
    font-weight: 700;
}

.signup-look--fresh .signup-progress__label.is-current {
    color: #14384c;
}

.signup-progress__line {
    flex: 1;
    height: 3px;
    margin-top: 15px;
    border-radius: 99px;
    background: #e4ebef;
    min-width: 10px;
}

.signup-progress__line.is-done {
    background: #3dcc6f;
}

.signup-progress__count {
    margin-left: auto;
    padding-top: 6px;
    white-space: nowrap;
    color: var(--signup-muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.signup-stephead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.signup-look--soft .signup-stephead {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.signup-stephead__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--signup-muted);
    margin-bottom: 6px;
}

.signup-look--soft .signup-stephead__eyebrow {
    letter-spacing: 0;
    font-weight: 600;
    text-transform: none;
    font-size: 0.92rem;
}

.signup-stephead__title {
    margin: 0;
    font-family: "Inter Tight", Inter, sans-serif;
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--signup-ink);
}

.signup-look--bold .signup-stephead__title {
    font-size: 2.35rem;
}

.signup-look--bold .signup-stephead__title span {
    color: var(--signup-accent);
}

.signup-stephead__subtitle {
    margin: 8px 0 0;
    color: var(--signup-muted);
    font-size: 1rem;
    line-height: 1.4;
    max-width: 34rem;
}

.signup-stephead__art {
    flex-shrink: 0;
    margin-top: -8px;
}

.signup-stephead__art svg {
    display: block;
    width: 176px;
    height: 138px;
}

.signup-card {
    background: #fff;
    border-radius: var(--signup-radius);
    box-shadow: var(--signup-card-shadow);
    padding: 18px 18px 16px;
    margin-bottom: 14px;
}

.signup-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.signup-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--signup-icon-bg);
    color: var(--signup-icon);
    flex-shrink: 0;
}

.signup-card__title {
    margin: 2px 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--signup-ink);
}

.signup-look--soft .signup-card__title,
.signup-look--bold .signup-card__title {
    font-family: "Inter Tight", Inter, sans-serif;
}

.signup-card__hint {
    margin: 2px 0 0;
    color: var(--signup-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.signup-label {
    display: block;
    margin: 12px 0 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #3d4d60;
}

.signup-card .signup-label:first-of-type,
.signup-card__head + .signup-label {
    margin-top: 0;
}

.signup-fake-input {
    min-height: 48px;
    border: 1px solid #d7e1ea;
    border-radius: 12px;
    background: #fff;
    color: var(--signup-ink);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 1rem;
}

.signup-fake-input.is-placeholder {
    color: #94a3b8;
}

.signup-fake-input--area {
    min-height: 84px;
    align-items: flex-start;
}

.signup-fake-input__chevron {
    color: #94a3b8;
    display: grid;
    place-items: center;
}

.signup-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.signup-fake-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-weight: 600;
    color: var(--signup-ink);
}

.signup-fake-check__box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--signup-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 800;
}

.signup-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.signup-look .signup-actions.mud-stack {
    flex-direction: column-reverse !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
}

.signup-cta,
.signup-look .signup-cta.mud-button-root {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: var(--signup-btn-radius) !important;
    background: var(--signup-accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    font-family: inherit;
}

.signup-back,
.signup-look .signup-back.mud-button-root {
    width: 100%;
    min-height: 48px;
    border-radius: var(--signup-btn-radius) !important;
    background: #fff !important;
    color: var(--signup-ink) !important;
    border: 1.5px solid #e2e8f0 !important;
    font-weight: 650 !important;
    font-size: 1rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    font-family: inherit;
}

.signup-look--fresh .signup-back,
.signup-look--fresh .signup-back.mud-button-root {
    background: transparent !important;
    border: none !important;
    color: var(--signup-accent) !important;
    min-height: 40px;
    font-weight: 700 !important;
}

.signup-look .signup-input .mud-input-outlined-border {
    border-radius: 12px !important;
    border-color: #d7e1ea !important;
}

.signup-look .signup-input .mud-input-slot,
.signup-look .signup-input input,
.signup-look .signup-input textarea {
    background: #fff !important;
    color: var(--signup-ink) !important;
    min-height: 48px;
}

.signup-look .signup-input textarea {
    min-height: 84px;
}

.signup-look .signup-wizard .mud-paper {
    border-radius: 18px !important;
}

.signup-look .signup-wizard .mud-paper.signup-card {
    background: #fff !important;
    border: none !important;
    box-shadow: var(--signup-card-shadow) !important;
}

.signup-look .signup-wizard .mud-input-outlined-border {
    border-radius: 12px !important;
    border-color: #d7e1ea !important;
}

.signup-look .signup-wizard .mud-input-slot,
.signup-look .signup-wizard .mud-input-slot input,
.signup-look .signup-wizard textarea {
    background: #fff !important;
    color: var(--signup-ink) !important;
}

.signup-look .signup-actions > .mud-stack {
    width: 100%;
}

.signup-look .signup-check .mud-icon-root,
.signup-look .signup-check.mud-primary .mud-icon-button {
    color: var(--signup-accent);
}

.signup-summary__bar {
    background: var(--signup-accent-deep);
    padding: 12px 16px;
}

.signup-preview {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 28px 22px 26px;
    background: var(--signup-bg);
    max-width: 560px;
}

.signup-preview__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.signup-preview.signup-look--fresh .signup-preview__decor {
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.95) 0 3px, transparent 4px),
        radial-gradient(circle at 90% 16%, #fff 0 3px, transparent 4px),
        radial-gradient(circle at 8% 92%, rgba(255, 255, 255, 0.7) 0 80px, transparent 82px);
}

.signup-preview.signup-look--soft .signup-preview__decor {
    background:
        radial-gradient(circle at 6% 6%, rgba(196, 181, 253, 0.7) 0 54px, transparent 56px),
        radial-gradient(circle at 98% 0%, rgba(191, 219, 254, 0.85) 0 70px, transparent 72px),
        radial-gradient(circle at 96% 96%, rgba(221, 214, 254, 0.7) 0 64px, transparent 66px);
}

.signup-preview.signup-look--bold .signup-preview__decor {
    background: radial-gradient(80% 42% at 100% 0%, rgba(191, 219, 254, 0.95) 0%, rgba(219, 234, 254, 0.2) 42%, transparent 60%);
}

.signup-preview__body {
    position: relative;
    z-index: 1;
}

.signup-look-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signup-look-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: transparent;
    color: inherit;
    padding: 12px;
    cursor: pointer;
    font: inherit;
}

.signup-look-option.is-selected {
    border-color: #60a5fa;
    box-shadow: inset 0 0 0 1px #60a5fa;
}

.signup-look-swatch {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
}

.signup-look-swatch--fresh { background: linear-gradient(145deg, #e7f7f8, #0e7388); }
.signup-look-swatch--soft { background: linear-gradient(145deg, #eef0fb, #5b4cdb); }
.signup-look-swatch--bold { background: linear-gradient(145deg, #f8fafc, #2563eb); }

.signup-look-option__title {
    font-weight: 700;
    display: flex;
    gap: 8px;
    align-items: center;
}

.signup-look-option__blurb {
    display: block;
    margin-top: 2px;
    opacity: 0.75;
    font-size: 0.85rem;
}

.signup-look-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 7px;
    background: rgba(61, 204, 111, 0.18);
    color: #16a34a;
}

@media (max-width: 640px) {
    .signup-stephead {
        align-items: center;
        gap: 8px;
    }
    .signup-stephead__art {
        display: block;
        margin-top: 0;
    }
    .signup-stephead__art svg {
        width: 96px;
        height: 76px;
    }
    .signup-stephead__title,
    .signup-look--bold .signup-stephead__title { font-size: 1.7rem; }
    .signup-brand__name { font-size: 1.4rem; }
    .signup-progress__step { min-width: 46px; }
    .signup-progress__label { font-size: 0.68rem; }
}

/* Popovers portal outside .signup-layout, so they inherit admin dark --cc-* tokens.
   Force light menus that match Fresh/Soft/Bold. */
body:has(.signup-layout) .mud-popover,
body:has(.signup-layout) .mud-list,
body:has(.signup-layout) .mud-select .mud-popover,
body:has(.signup-preview) .mud-popover {
    --cc-surface-2: #ffffff;
    --cc-foreground: #10233d;
    --cc-border-strong: #d7e1ea;
    background: #ffffff !important;
    color: #10233d !important;
    border: 1px solid #d7e1ea !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 36px rgba(16, 72, 88, 0.12) !important;
}

body:has(.signup-layout) .mud-popover .mud-list-item,
body:has(.signup-layout) .mud-popover .mud-menu-item,
body:has(.signup-preview) .mud-popover .mud-list-item {
    color: #10233d !important;
    background: transparent !important;
}

body:has(.signup-layout) .mud-popover .mud-list-item:hover,
body:has(.signup-layout) .mud-popover .mud-list-item.mud-selected-item,
body:has(.signup-layout) .mud-popover .mud-menu-item:hover,
body:has(.signup-preview) .mud-popover .mud-list-item:hover,
body:has(.signup-preview) .mud-popover .mud-list-item.mud-selected-item {
    background: #e7f7f8 !important;
    color: #10233d !important;
}

body:has(.signup-look--soft) .mud-popover .mud-list-item:hover,
body:has(.signup-look--soft) .mud-popover .mud-list-item.mud-selected-item {
    background: #eef2ff !important;
}

body:has(.signup-look--bold) .mud-popover .mud-list-item:hover,
body:has(.signup-look--bold) .mud-popover .mud-list-item.mud-selected-item {
    background: #eff6ff !important;
}

body:has(.signup-layout) .mud-popover .mud-list-item .mud-typography,
body:has(.signup-layout) .mud-popover .mud-list-item-text,
body:has(.signup-preview) .mud-popover .mud-typography {
    color: inherit !important;
}