/* MrCharles — checkout flow */

.mc-checkout-body { background: var(--mc-porcelain); }

.mc-checkout {
    min-height: 100vh;
    padding: calc(var(--mc-nav-h) + 46px) 0 80px;
    background: var(--mc-porcelain);
}
.mc-checkout__shell {
    width: 100%;
    max-width: 940px;
    margin-inline: auto;
    padding-inline: 22px;
}

/* ─── Progress bar ──────────────────────────── */
.mc-steps-bar {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 44px;
}
.mc-steps-bar__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mc-font-ui);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mc-text-light);
    padding-bottom: 14px;
    border-bottom: 2px solid var(--mc-border);
}
.mc-steps-bar__item span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mc-border);
    color: var(--mc-obsidian);
    font-size: 11px;
    flex-shrink: 0;
}
.mc-steps-bar__item.is-active { color: var(--mc-obsidian); border-bottom-color: var(--mc-evergreen); }
.mc-steps-bar__item.is-active span { background: var(--mc-evergreen); color: var(--mc-porcelain); }
.mc-steps-bar__item.is-done { color: var(--mc-evergreen); border-bottom-color: var(--mc-evergreen); }
.mc-steps-bar__item.is-done span { background: var(--mc-evergreen); color: var(--mc-porcelain); }

/* ─── Panels ────────────────────────────────── */
.mc-step-panel { display: none; }
.mc-step-panel.is-active { display: block; animation: mcStepIn .35s ease; }
@keyframes mcStepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.mc-step-panel__head { margin-bottom: 34px; }
.mc-step-panel__title {
    font-family: var(--mc-font-display);
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    color: var(--mc-obsidian);
    margin: 0 0 10px;
}
.mc-step-panel__sub { color: var(--mc-text-light); margin: 0; line-height: 1.7; }

.mc-picker-block { margin-top: 40px; }
.mc-picker__label {
    font-family: var(--mc-font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mc-obsidian);
    margin: 0 0 16px;
}
.mc-picker__optional { color: var(--mc-text-light); text-transform: none; letter-spacing: 0; font-size: 11px; }
.mc-picker__group { margin-bottom: 30px; }
.mc-picker__loading { color: var(--mc-text-light); font-size: .9rem; margin: 0; }

/* ─── Calendar ──────────────────────────────── */
.mc-cal { background: var(--mc-white); border: 1px solid var(--mc-border); border-radius: 3px; padding: 22px; }
.mc-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mc-cal__title { font-family: var(--mc-font-ui); font-weight: 500; font-size: 1rem; color: var(--mc-obsidian); }
.mc-cal__nav {
    width: 34px; height: 34px;
    border: 1px solid var(--mc-border);
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    color: var(--mc-obsidian);
    transition: background .2s ease;
}
.mc-cal__nav:hover:not(:disabled) { background: var(--mc-porcelain); }
.mc-cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.mc-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mc-cal__dayname {
    text-align: center;
    font-family: var(--mc-font-ui);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mc-text-light);
    padding-bottom: 8px;
}
.mc-cal__cell {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 3px;
    font-size: .9rem;
    color: var(--mc-obsidian);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.mc-cal__cell:hover:not(.is-disabled):not(.is-selected) { background: var(--mc-porcelain); }
.mc-cal__cell.is-disabled { color: rgba(26,33,44,.22); cursor: not-allowed; }
.mc-cal__cell.is-today { border-color: var(--mc-gold); }
.mc-cal__cell.is-selected { background: var(--mc-evergreen); color: var(--mc-porcelain); }
.mc-cal__cell--empty { cursor: default; }
.mc-cal__note { margin: 14px 0 0; font-size: .78rem; color: var(--mc-text-light); }

/* ─── Chips (day / week pickers) ────────────── */
.mc-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mc-chip {
    padding: 13px 24px;
    background: var(--mc-white);
    border: 1px solid var(--mc-border);
    border-radius: 3px;
    font-family: var(--mc-font-ui);
    font-size: .88rem;
    color: var(--mc-obsidian);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mc-chip:hover { border-color: var(--mc-evergreen); }
.mc-chip.is-selected { background: var(--mc-evergreen); border-color: var(--mc-evergreen); color: var(--mc-porcelain); }

/* ─── Time grid ─────────────────────────────── */
.mc-time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.mc-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 8px;
    background: var(--mc-white);
    border: 1px solid var(--mc-border);
    border-radius: 3px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mc-time:hover:not(.is-disabled) { border-color: var(--mc-evergreen); }
.mc-time.is-selected { background: var(--mc-evergreen); border-color: var(--mc-evergreen); color: var(--mc-porcelain); }
.mc-time.is-disabled { opacity: .42; cursor: not-allowed; background: var(--mc-porcelain); }
.mc-time__value { font-family: var(--mc-font-ui); font-size: .95rem; }
.mc-time__tag { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-text-light); }
.mc-time.is-selected .mc-time__tag { color: rgba(243,241,237,.7); }

/* ─── Add-ons ───────────────────────────────── */
.mc-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.mc-addon { background: var(--mc-white); border: 1px solid var(--mc-border); border-radius: 3px; overflow: hidden; }
.mc-addon.is-selected { border-color: var(--mc-evergreen); }
.mc-addon__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}
.mc-addon__check {
    width: 19px; height: 19px;
    flex-shrink: 0;
    border: 1px solid var(--mc-border);
    border-radius: 2px;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--mc-porcelain);
}
.mc-addon.is-selected .mc-addon__check { background: var(--mc-evergreen); border-color: var(--mc-evergreen); }
.mc-addon__name { flex: 1; font-size: .9rem; color: var(--mc-obsidian); }
.mc-addon__price { font-family: var(--mc-font-ui); font-size: .88rem; color: var(--mc-evergreen); white-space: nowrap; }
.mc-addon__note { margin: 0; padding: 0 17px 13px; font-size: .76rem; color: var(--mc-text-light); line-height: 1.5; }

.mc-qty { display: flex; align-items: center; gap: 10px; }
.mc-qty__btn {
    width: 26px; height: 26px;
    border: 1px solid var(--mc-border);
    background: var(--mc-white);
    border-radius: 2px;
    cursor: pointer;
    color: var(--mc-obsidian);
    line-height: 1;
}
.mc-qty__btn:hover { background: var(--mc-porcelain); }
.mc-qty__value { min-width: 18px; text-align: center; font-family: var(--mc-font-ui); font-size: .9rem; }

/* ─── Summary ───────────────────────────────── */
.mc-summary {
    background: var(--mc-white);
    border: 1px solid var(--mc-border);
    border-radius: 3px;
    padding: 22px 24px;
}
.mc-summary--pay { margin: 30px 0 22px; }
.mc-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 0;
    font-size: .92rem;
    color: var(--mc-obsidian);
}
.mc-summary__row--addon { color: var(--mc-text-light); font-size: .86rem; }
.mc-summary__row--when { color: var(--mc-text-light); font-size: .86rem; border-top: 1px solid var(--mc-border); margin-top: 8px; padding-top: 14px; }
.mc-summary__row--total {
    border-top: 1px solid var(--mc-border);
    margin-top: 8px;
    padding-top: 15px;
    font-family: var(--mc-font-ui);
    font-size: 1.06rem;
    font-weight: 500;
}

/* ─── Form ──────────────────────────────────── */
.mc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mc-field--full { grid-column: 1 / -1; }
.mc-field label {
    display: block;
    font-family: var(--mc-font-ui);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mc-text-light);
    margin-bottom: 8px;
}
.mc-field input, .mc-field textarea, .mc-field select {
    width: 100%;
    padding: 14px 16px;
    background: var(--mc-white);
    border: 1px solid var(--mc-border);
    border-radius: 3px;
    font-family: var(--mc-font-body);
    font-size: .95rem;
    color: var(--mc-obsidian);
    transition: border-color .2s ease;
}
.mc-field input:focus, .mc-field textarea:focus, .mc-field select:focus {
    outline: none;
    border-color: var(--mc-evergreen);
}
.mc-field input.is-invalid, .mc-field textarea.is-invalid { border-color: #c0392b; }
.mc-field textarea { resize: vertical; }

.mc-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .89rem;
    color: var(--mc-obsidian);
    cursor: pointer;
    line-height: 1.5;
    padding: 4px 0;
}
.mc-consent input { margin-top: 3px; accent-color: var(--mc-evergreen); width: 17px; height: 17px; }
.mc-consent.is-invalid { color: #c0392b; }

.mc-subscription-note {
    margin: 14px 0 0;
    font-size: .82rem;
    color: var(--mc-text-light);
    padding: 12px 15px;
    background: rgba(22,81,70,.06);
    border-radius: 3px;
}

/* ─── Actions ───────────────────────────────── */
.mc-step-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mc-btn--ghost {
    background: transparent;
    color: var(--mc-obsidian);
    border-color: var(--mc-border);
}
.mc-btn--ghost:hover { background: var(--mc-white); color: var(--mc-obsidian); }

.mc-spinner {
    width: 15px; height: 15px;
    border: 2px solid rgba(243,241,237,.35);
    border-top-color: var(--mc-porcelain);
    border-radius: 50%;
    animation: mcSpin .7s linear infinite;
}
@keyframes mcSpin { to { transform: rotate(360deg); } }

/* ─── Done ──────────────────────────────────── */
.mc-done { text-align: center; padding: 30px 0; }
.mc-done__icon {
    width: 62px; height: 62px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--mc-evergreen);
    color: var(--mc-porcelain);
    display: grid;
    place-items: center;
    font-size: 28px;
}
.mc-done__title { font-family: var(--mc-font-display); font-size: 2.1rem; color: var(--mc-obsidian); margin: 0 0 10px; }
.mc-done__sub { color: var(--mc-text-light); margin: 0 0 32px; }
.mc-done__card { text-align: left; max-width: 460px; margin: 0 auto 30px; background: var(--mc-white); border: 1px solid var(--mc-border); border-radius: 3px; padding: 22px 24px; }
.mc-done__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ─── Responsive ────────────────────────────── */
@media (max-width: 640px) {
    .mc-form-grid { grid-template-columns: 1fr; }
    .mc-steps-bar__item { font-size: 0; gap: 0; justify-content: center; }
    .mc-steps-bar__item span { font-size: 11px; }
    .mc-step-actions .mc-btn { width: 100%; }
    .mc-done__actions .mc-btn { width: 100%; }
}