/* ============================================================
   features/forms/mix_master_intake.css — the guided mix/master intake (P7)
   ------------------------------------------------------------
   Multi-step "send us your files" flow on the mixing & mastering pages.
   Shares the booking widget's language (squircle card, dot progress, step
   cross-fade, dd-loader on submit) but is file-based, not calendar-based.

   Markup hooks the JS toggles: .mmi-step/.hidden, .mmi-progress__step
   .is-done/.is-current, .mmi-service.is-active[aria-checked],
   .mmi-quote__row--discount.hidden, .mmi-file.has-file, #mmi-submit.is-loading.

   Token-only: no raw hex / ad-hoc shadows / magic radii. All motion gated
   behind prefers-reduced-motion.
   ============================================================ */

.mmi {
    max-width: 760px;
    margin: 0 auto;
}

.mmi-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
}

/* ---- progress — the brand dot device, one per step ------------------ */
.mmi-progress {
    display: flex;
    justify-content: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
    flex-wrap: wrap;
}

.mmi-progress__step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    opacity: 0.6;
    transition: opacity var(--dur-base) var(--ease-soft);
}

.mmi-progress__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--coral-200);
    transition: width var(--dur-base) var(--ease-dreamy),
                background-color var(--dur-base) var(--ease-soft);
}

.mmi-progress__label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
}

.mmi-progress__step.is-done {
    opacity: 1;
}
.mmi-progress__step.is-done .mmi-progress__dot {
    background: var(--accent);
}

.mmi-progress__step.is-current {
    opacity: 1;
    color: var(--text);
}
.mmi-progress__step.is-current .mmi-progress__dot {
    width: 26px;
    background: var(--accent-strong);
}

/* ---- steps — one decision per screen, cross-fading in --------------- */
.mmi-step:not(.hidden) {
    animation: mmiStepIn var(--dur-slow) var(--ease-dreamy) both;
}

@keyframes mmiStepIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.mmi-step__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text);
    text-align: left;
    margin-bottom: var(--space-2);
}

.mmi-step__hint {
    font-size: var(--fs-small);
    color: var(--text-muted);
    text-align: left;
    margin-bottom: var(--space-6);
}

.mmi-step__error {
    margin-top: var(--space-4);
    display: flex;
    gap: var(--space-2);
    color: var(--danger);
    font-size: var(--fs-small);
    font-weight: 600;
}

.mmi-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    margin-bottom: var(--space-2);
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease-soft),
                background-color var(--dur-base) var(--ease-soft);
}
.mmi-back svg {
    transition: transform var(--dur-base) var(--ease-dreamy);
}
.mmi-back:hover {
    color: var(--accent-strong);
    background: var(--tint-soft);
}
.mmi-back:hover svg {
    transform: translateX(-3px);
}
.mmi-back:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ---- step 1: service cards (squircles) ------------------------------ */
.mmi-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.mmi-service {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-organic);
    border: 2px solid var(--coral-200);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-soft),
                box-shadow var(--dur-base) var(--ease-dreamy),
                transform var(--dur-base) var(--ease-dreamy);
}
.mmi-service:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    transform: translateY(-3px);
}
.mmi-service:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}
.mmi-service.is-active {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 2px var(--accent-strong) inset;
}

.mmi-service__icon {
    display: inline-flex;
    color: var(--accent-strong);
}
.mmi-service__icon .dd-icon {
    width: 2em;
    height: 2em;
}

.mmi-service__name {
    font-size: var(--fs-lead);
    font-weight: 700;
}

.mmi-service__desc {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

.mmi-service__from {
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    color: var(--accent-strong);
}

/* ---- step 2: track stepper + live quote ----------------------------- */
.mmi-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-7);
}

.mmi-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--coral-200);
    background: var(--surface);
    color: var(--accent-strong);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-dreamy),
                box-shadow var(--dur-base) var(--ease-dreamy);
}
.mmi-stepper__btn:hover:not(:disabled) {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}
.mmi-stepper__btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}
.mmi-stepper__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mmi-stepper__btn .dd-icon {
    width: 1.4em;
    height: 1.4em;
}

.mmi-stepper__count {
    min-width: 2.5ch;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.mmi-quote {
    margin: 0 0 var(--space-3);
    padding: var(--space-6) var(--space-7);
    border-radius: var(--radius-lg);
    background: var(--surface-tint);
    border: 1px solid var(--border);
}
.mmi-quote__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}
.mmi-quote__row dt {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    color: var(--text-muted);
    margin: 0;
}
.mmi-quote__row dd {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text);
}
.mmi-quote__row--discount dd {
    color: var(--accent-strong);
}
.mmi-quote__row--total {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.mmi-quote__row--total dt {
    color: var(--text);
}
.mmi-quote__row--total dd {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
}

.mmi-quote__note {
    font-size: var(--fs-small);
    color: var(--text-muted);
    text-align: left;
    margin-bottom: var(--space-6);
}

/* ---- step 3: branded file input ------------------------------------- */
.mmi-file {
    position: relative;
}
.mmi-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.mmi-file__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-4) var(--space-5);
    border: 2px dashed var(--coral-200);
    border-radius: var(--radius-md);
    background: var(--surface-tint);
    color: var(--text-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-soft),
                color var(--dur-base) var(--ease-soft);
}
.mmi-file__label:hover {
    border-color: var(--accent);
    color: var(--text);
}
.mmi-file__input:focus-visible + .mmi-file__label {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}
.mmi-file.has-file .mmi-file__label {
    border-style: solid;
    border-color: var(--accent-strong);
    color: var(--text);
}
.mmi-file__icon {
    display: inline-flex;
    color: var(--accent-strong);
}
.mmi-file__icon .dd-icon {
    width: 1.3em;
    height: 1.3em;
}
.mmi-file__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mmi-file__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--dur-base) var(--ease-soft),
                background-color var(--dur-base) var(--ease-soft);
}
.mmi-file__clear:hover {
    color: var(--danger);
    background: var(--tint-soft);
}
.mmi-file__clear:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.mmi-continue {
    margin-top: var(--space-1);
}

/* The intake's own fields stack with comfortable rhythm. */
.mmi-step .dd-field {
    margin-bottom: var(--space-5);
}

/* ---- responsive ----------------------------------------------------- */
@media (max-width: 768px) {
    .mmi-card {
        padding: var(--space-7);
    }
    .mmi-services {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .mmi-progress {
        gap: var(--space-3);
    }
    /* Keep the dots; drop the labels so the row never wraps awkwardly. */
    .mmi-progress__label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mmi-step:not(.hidden) {
        animation: none;
    }
    .mmi-service,
    .mmi-stepper__btn,
    .mmi-back svg {
        transition: none;
    }
    .mmi-service:hover,
    .mmi-stepper__btn:hover:not(:disabled) {
        transform: none;
    }
    .mmi-back:hover svg {
        transform: none;
    }
}