/**
 * MenuCreator.eu — application stylesheet (dashboard, admin, auth).
 * Loaded after Bootstrap 5; only overrides and app-specific components here.
 */

:root {
    --mc-brand: #e85d2f;        /* accent / large text only (3.5:1 on white) */
    --mc-brand-dark: #c94a20;   /* AA-compliant text/buttons (~4.9:1 on white) */
    --mc-brand-darker: #a83d18; /* hover/active */
    --mc-brand-soft: #fdeee7;
    --mc-ink: #1f2430;
    --mc-ink-soft: #5c6470;
    --mc-bg: #f6f7f9;
    --mc-surface: #ffffff;
    --mc-border: #e6e8ec;
    --mc-radius: 0.75rem;
    --mc-shadow-sm: 0 1px 2px rgba(24, 30, 42, 0.06), 0 1px 3px rgba(24, 30, 42, 0.04);
    --mc-shadow: 0 4px 14px rgba(24, 30, 42, 0.08);
    --mc-sidebar-width: 250px;
    --mc-admin-bg: #171c26;
    --mc-admin-bg-hover: #222937;
    --mc-admin-ink: #aeb6c2;
}

body {
    background: var(--mc-bg);
    color: var(--mc-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Links use the AA-compliant darker shade (WCAG 1.4.3). */
a { color: var(--mc-brand-dark); }
a:hover { color: var(--mc-brand-darker); }

/* ---------------------------------------------------------------- buttons */
/* White-on-orange needs the darker shade to reach 4.5:1 for button text. */
.btn-primary,
.btn-primary:focus {
    --bs-btn-bg: var(--mc-brand-dark);
    --bs-btn-border-color: var(--mc-brand-dark);
    --bs-btn-hover-bg: var(--mc-brand-darker);
    --bs-btn-hover-border-color: var(--mc-brand-darker);
    --bs-btn-active-bg: var(--mc-brand-darker);
    --bs-btn-active-border-color: var(--mc-brand-darker);
    --bs-btn-disabled-bg: var(--mc-brand-dark);
    --bs-btn-disabled-border-color: var(--mc-brand-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--mc-brand);
    --bs-btn-border-color: var(--mc-brand);
    --bs-btn-hover-bg: var(--mc-brand);
    --bs-btn-hover-border-color: var(--mc-brand);
    --bs-btn-active-bg: var(--mc-brand-dark);
    --bs-btn-active-border-color: var(--mc-brand-dark);
}

.text-brand { color: var(--mc-brand) !important; }
.bg-brand-soft { background: var(--mc-brand-soft) !important; }

/* ------------------------------------------------------------------ shell */
.mc-shell {
    display: flex;
    min-height: 100vh;
}

.mc-sidebar {
    width: var(--mc-sidebar-width);
    min-width: var(--mc-sidebar-width);
    background: var(--mc-surface);
    border-right: 1px solid var(--mc-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1020;
}

.mc-sidebar .mc-logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1.1rem 1.25rem;
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--mc-ink);
    text-decoration: none;
}

.mc-sidebar .mc-logo .mc-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--mc-brand), #f0824f);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: var(--mc-shadow-sm);
}

.mc-nav {
    padding: 0.5rem 0.75rem 1.25rem;
    flex: 1;
}

.mc-nav .mc-nav-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mc-ink-soft);
    padding: 1rem 0.75rem 0.35rem;
}

.mc-nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 2px;
    border-radius: 0.55rem;
    color: var(--mc-ink-soft);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.mc-nav a i { font-size: 1.05rem; width: 1.25rem; text-align: center; }

.mc-nav a:hover { background: var(--mc-bg); color: var(--mc-ink); }

.mc-nav a.active {
    background: var(--mc-brand-soft);
    color: var(--mc-brand-dark);
}

.mc-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mc-topbar {
    background: var(--mc-surface);
    border-bottom: 1px solid var(--mc-border);
    padding: 0.65rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1010;
}

.mc-content {
    padding: 1.75rem;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.mc-plan-badge {
    background: var(--mc-brand-soft);
    color: var(--mc-brand-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 0.3rem 0.7rem;
}

.mc-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mc-brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ------------------------------------------------------------------ cards */
.card {
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--mc-border);
    font-weight: 600;
}

.mc-stat-card .mc-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--mc-brand-soft);
    color: var(--mc-brand-dark);
}

.mc-stat-card .mc-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.mc-stat-card .mc-stat-label {
    color: var(--mc-ink-soft);
    font-size: 0.85rem;
}

/* ----------------------------------------------------------------- tables */
.table > :not(caption) > * > * { padding: 0.7rem 0.75rem; }

.table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mc-ink-soft);
    border-bottom-width: 1px;
}

.mc-table-card .table { margin-bottom: 0; }
.mc-table-card .table > :last-child > tr:last-child > * { border-bottom: 0; }

/* ------------------------------------------------------------------ forms */
.form-control, .form-select {
    border-radius: 0.55rem;
    border-color: var(--mc-border);
    padding: 0.5rem 0.8rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--mc-brand);
    box-shadow: 0 0 0 0.2rem rgba(232, 93, 47, 0.15);
}

.form-check-input:checked {
    background-color: var(--mc-brand);
    border-color: var(--mc-brand);
}

.form-label { font-weight: 500; font-size: 0.9rem; }

/* ------------------------------------------------------------------- auth */
.mc-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(60rem 30rem at 110% -10%, rgba(232, 93, 47, 0.10), transparent),
        radial-gradient(50rem 28rem at -20% 110%, rgba(232, 93, 47, 0.07), transparent),
        var(--mc-bg);
}

.mc-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 1rem;
    box-shadow: var(--mc-shadow);
    padding: 2.25rem 2rem;
}

.mc-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mc-ink);
    text-decoration: none;
    margin-bottom: 1.75rem;
}

.mc-auth-brand .mc-logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--mc-brand), #f0824f);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mc-shadow-sm);
}

/* ------------------------------------------------------------------ admin */
.mc-sidebar.mc-sidebar-admin {
    background: var(--mc-admin-bg);
    border-right: 1px solid #232a38;
}

.mc-sidebar-admin .mc-logo { color: #fff; }

.mc-sidebar-admin .mc-nav a { color: var(--mc-admin-ink); }

.mc-sidebar-admin .mc-nav a:hover {
    background: var(--mc-admin-bg-hover);
    color: #fff;
}

.mc-sidebar-admin .mc-nav a.active {
    background: rgba(232, 93, 47, 0.18);
    color: #ff9a6e;
}

.mc-sidebar-admin .mc-nav-label { color: #67707e; }

/* ----------------------------------------------------------------- badges */
.badge { font-weight: 600; }

.mc-badge-soft-success { background: #e5f6ee; color: #1c7a4d; }
.mc-badge-soft-warning { background: #fdf3e0; color: #a06b12; }
.mc-badge-soft-danger  { background: #fdeaea; color: #b02a37; }
.mc-badge-soft-muted   { background: #eef0f3; color: #5c6470; }
.mc-badge-soft-info    { background: #e7f1fb; color: #1f5f9e; }

/* ------------------------------------------------------------ plan matrix */
.mc-plan-card { position: relative; height: 100%; }

.mc-plan-card.mc-plan-current { border-color: var(--mc-brand); box-shadow: 0 0 0 1px var(--mc-brand); }

.mc-plan-price { font-size: 2rem; font-weight: 700; }
.mc-plan-price small { font-size: 0.9rem; font-weight: 500; color: var(--mc-ink-soft); }

.mc-plan-popular {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mc-brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 0.25rem 0.75rem;
}

.mc-feature-list { list-style: none; padding: 0; margin: 0; }
.mc-feature-list li { padding: 0.3rem 0; font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: baseline; }
.mc-feature-list li i { color: var(--mc-brand); }

/* -------------------------------------------------------------- utilities */
.mc-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.mc-page-header h1 { font-size: 1.45rem; font-weight: 700; margin: 0; }
.mc-page-header .mc-page-sub { color: var(--mc-ink-soft); font-size: 0.9rem; margin: 0.15rem 0 0; }

.mc-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--mc-ink-soft);
}

.mc-empty i { font-size: 2.25rem; display: block; margin-bottom: 0.75rem; color: #c3c9d1; }

.mc-progress { height: 8px; border-radius: 99px; background: #edeff2; }
.mc-progress .progress-bar { background: var(--mc-brand); border-radius: 99px; }

.mc-sparkline { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.mc-sparkline span {
    flex: 1;
    min-width: 3px;
    background: var(--mc-brand-soft);
    border-radius: 2px 2px 0 0;
}
.mc-sparkline span.hot { background: var(--mc-brand); }

#mc-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: 0.5rem; }

.mc-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: #eef0f3;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 991.98px) {
    .mc-shell { flex-direction: column; }
    .mc-sidebar {
        position: static;
        width: 100%;
        min-width: 0;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--mc-border);
    }
    .mc-nav { display: flex; flex-wrap: wrap; gap: 2px; padding-bottom: 0.75rem; }
    .mc-nav .mc-nav-label { display: none; }
    .mc-content { padding: 1.25rem 1rem; }
}

/* --- Accessibility (A11Y-7) ------------------------------------------- */
:focus-visible {
    outline: 3px solid #c94a20;
    outline-offset: 2px;
}
.mc-required::after { content: " *"; color: #b3341c; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== v1.7 Menu Studio ===== */
.mc-studio-body { background: #faf5ef; }
.mc-studio { min-height: 100vh; display: flex; flex-direction: column; }
.mc-studio-top { display: flex; align-items: center; gap: 24px; padding: 14px 22px; background: #fff; border-bottom: 1px solid #eee4d8; flex-wrap: wrap; }
.mc-studio-brand { font-weight: 700; color: #2b2622; text-decoration: none; white-space: nowrap; }
.mc-studio-brand:hover { color: #c94a20; }
.mc-studio-steps { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; flex-wrap: wrap; }
.mc-studio-steps li { display: flex; align-items: center; }
.mc-studio-steps li + li::before { content: ""; width: 22px; height: 2px; background: #e7dccd; margin: 0 6px; display: inline-block; }
.mc-studio-steps a { text-decoration: none; }
.mc-studio-steps li > a, .mc-studio-steps li > span { display: flex; align-items: center; gap: 7px; color: #8a8178; }
.mc-step-dot { width: 28px; height: 28px; border-radius: 50%; background: #efe7db; color: #8a8178; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 600; }
.mc-studio-steps .is-current .mc-step-dot { background: #c94a20; color: #fff; }
.mc-studio-steps .is-current { color: #2b2622; font-weight: 600; }
.mc-studio-steps .is-done .mc-step-dot { background: #2e7d4f; color: #fff; }
.mc-step-label { font-size: .87rem; }
@media (max-width: 720px) { .mc-step-label { display: none; } }
.mc-studio-main { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 40px 18px 70px; position: relative; }
.mc-studio-h1 { font-weight: 800; color: #2b2622; }
.mc-studio-lead { max-width: 620px; margin-left: auto; margin-right: auto; }
.mc-studio-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }

/* step 1: pack cards */
.mc-pack-card { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; text-align: start; background: #fff; border: 2px solid #eee4d8; border-radius: 16px; padding: 22px 20px; transition: border-color .15s, transform .15s, box-shadow .15s; cursor: pointer; }
.mc-pack-card:hover, .mc-pack-card:focus-visible { border-color: #c94a20; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(43, 38, 34, .08); }
.mc-pack-emoji { font-size: 2rem; line-height: 1; }
.mc-pack-name { font-weight: 700; font-size: 1.1rem; color: #2b2622; }
.mc-pack-desc { color: #6f675e; font-size: .9rem; min-height: 2.6em; }
.mc-pack-meta { color: #9a9187; font-size: .8rem; }
.mc-pack-cta { margin-top: auto; padding-top: 8px; color: #c94a20; font-weight: 600; font-size: .9rem; }
.mc-pack-card-blank { border-style: dashed; background: #fffdf9; }

/* step 2: dish rows */
.mc-studio-form { max-width: 860px; margin: 0 auto; }
.mc-cat-input { max-width: 340px; }
.mc-dish-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid #f2ece3; }
.mc-dish-toggle { padding-top: 8px; }
.mc-dish-name { flex: 1; min-width: 0; }
.mc-dish-desc { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.mc-dish-price { width: 130px; flex-shrink: 0; }
/* v1.19: add and remove. The remove button sits in the row's own gap rather
   than in a column of its own, so a row with one reads at the same width as
   a row without — nothing shifts when the buttons appear. */
.mc-dish-desc-input { color: #6c757d; }
.mc-remove-dish, .mc-remove-section { flex-shrink: 0; border: 0; opacity: .45; }
.mc-remove-dish { margin-top: 3px; }
.mc-dish-row:hover .mc-remove-dish, .mc-remove-dish:focus,
.mc-section:hover .mc-remove-section, .mc-remove-section:focus { opacity: 1; }
.mc-dish-new, .mc-section-new { background: #fbf8f3; border-radius: 8px; }
.mc-dish-new { padding-left: 8px; padding-right: 8px; }

/* step 3: look cards */
.mc-look-card { display: block; cursor: pointer; position: relative; height: 100%; }
.mc-look-card input { position: absolute; opacity: 0; }
.mc-look-preview { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; padding: 16px 14px 12px; border: 3px solid transparent; box-shadow: 0 4px 14px rgba(43, 38, 34, .07); transition: border-color .15s, transform .15s; min-height: 150px; }
.mc-look-card input:checked + .mc-look-preview { border-color: #c94a20; transform: translateY(-2px); }
.mc-look-card input:focus-visible + .mc-look-preview { outline: 3px solid #c94a20; outline-offset: 2px; }
.mc-look-title { font-weight: 700; font-size: .95rem; }
.mc-look-line { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; padding-bottom: 3px; }
.mc-look-tag { margin-top: auto; align-self: flex-start; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.mc-look-label { display: block; text-align: center; margin-top: 8px; font-size: .88rem; font-weight: 600; color: #2b2622; }

/* step 4: logo */
.mc-logo-placeholder { width: 96px; height: 96px; margin: 0 auto; border-radius: 16px; background: #efe7db; color: #b6aa99; display: flex; align-items: center; justify-content: center; font-size: 2rem; }

/* step 5: done */
.mc-done-badge { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: #2e7d4f; color: #fff; font-size: 2.2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(46, 125, 79, .35); }
.mc-done-action { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border: 2px solid #eee4d8; border-radius: 14px; padding: 18px 12px; text-align: center; text-decoration: none; color: #2b2622; height: 100%; transition: border-color .15s, transform .15s; }
.mc-done-action:hover { border-color: #c94a20; transform: translateY(-2px); color: #2b2622; }
.mc-done-action i { font-size: 1.5rem; color: #c94a20; }
.mc-done-action span { font-weight: 600; }
.mc-done-action small { color: #8a8178; }
.mc-confetti { pointer-events: none; position: absolute; inset: 0; overflow: hidden; }
.mc-confetti i { position: absolute; top: -12px; left: calc(var(--n) * 4.16%); width: 8px; height: 14px; border-radius: 2px; opacity: .9; background: #c94a20; animation: mc-confetti-fall 2.8s ease-in calc(var(--n) * .09s) 1 forwards; }
.mc-confetti i:nth-child(3n) { background: #2e7d4f; width: 6px; height: 10px; }
.mc-confetti i:nth-child(4n) { background: #d9a441; }
.mc-confetti i:nth-child(5n) { background: #1f3a5f; height: 8px; }
@keyframes mc-confetti-fall { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(105vh) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mc-confetti { display: none; } }

/* ===== v1.8 format picker ===== */
.mc-format-card { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; position: relative; height: 100%; }
.mc-format-card input { position: absolute; opacity: 0; }
.mc-format-sheet { display: flex; gap: 7%; width: 118px; height: 160px; padding: 12px 10px; background: #fff; border: 3px solid #e7dccd; border-radius: 8px; box-shadow: 0 4px 14px rgba(43, 38, 34, .08); transition: border-color .15s, transform .15s; }
.mc-format-sheet.is-landscape { width: 190px; height: 138px; margin-top: 11px; }
.mc-format-card input:checked + .mc-format-sheet { border-color: #c94a20; transform: translateY(-2px); }
.mc-format-card input:focus-visible + .mc-format-sheet { outline: 3px solid #c94a20; outline-offset: 2px; }
.mc-format-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mc-format-col i { display: block; height: 4px; border-radius: 2px; background: #e3d9ca; }
.mc-format-col i.is-head { height: 7px; background: #c94a20; opacity: .75; width: 70%; }
.mc-format-col i.is-short { width: 55%; }
.mc-format-name { margin-top: 10px; font-weight: 600; color: #2b2622; }
.mc-format-sub { font-size: .8rem; color: #8a8178; text-align: center; }

/* ===== v1.10 Style Library ===== */
.mc-style-filters { display: flex; flex-direction: column; gap: 8px; }
.mc-style-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mc-style-filter-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #8a8178; min-width: 92px; }
.mc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; border: 1px solid #e7dccd; background: #fff; color: #2b2622; font-size: .82rem; text-decoration: none; transition: border-color .15s, background .15s; }
.mc-chip:hover { border-color: #c94a20; color: #2b2622; }
.mc-chip.is-on { background: #c94a20; border-color: #c94a20; color: #fff; }
.mc-chip-n { font-size: .7rem; opacity: .6; }
.mc-chip.is-on .mc-chip-n { opacity: .85; }

.mc-style-card { display: block; cursor: pointer; position: relative; height: 100%; }
.mc-style-card input { position: absolute; opacity: 0; }
.mc-style-page { display: flex; flex-direction: column; gap: 7px; border-radius: 10px; padding: 16px 14px; min-height: 158px; border: 3px solid transparent; box-shadow: 0 4px 14px rgba(43, 38, 34, .08); transition: border-color .15s, transform .15s; overflow: hidden; }
.mc-style-card input:checked + .mc-style-page { border-color: #c94a20; transform: translateY(-2px); }
.mc-style-card input:focus-visible + .mc-style-page { outline: 3px solid #c94a20; outline-offset: 2px; }
.mc-style-title { font-weight: 700; font-size: .9rem; text-align: center; margin-bottom: 2px; }
.mc-style-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.mc-style-dish { display: block; height: 5px; border-radius: 3px; flex: 1; background: currentColor; opacity: .28; }
.mc-style-line:nth-child(3) .mc-style-dish { max-width: 68%; }
.mc-style-line:nth-child(5) .mc-style-dish { max-width: 78%; }
.mc-style-price { display: block; width: 22px; height: 5px; border-radius: 3px; flex: none; }
.mc-style-name { display: block; text-align: center; margin-top: 8px; font-size: .87rem; font-weight: 600; color: #2b2622; }
.mc-style-meta { display: block; text-align: center; font-size: .72rem; color: #8a8178; }

/* ===== v1.11 Editor: save states, drag handles ===== */
.mc-save-indicator.unsaved { color: #b4690e; }
.mc-cat-grip {
  cursor: grab;
  opacity: .35;
  margin-right: .35rem;
  transition: opacity .15s ease;
}
.mc-cat-grip:hover { opacity: .9; }
.mc-cat-grip:active { cursor: grabbing; }

/* v1.22 — blocks on the editing canvas. They are drawn as what they print,
   so the surface stays a preview rather than a form. */
.mc-block-card { position: relative; padding: .35rem; margin: .4rem 0; border: 1px dashed transparent; border-radius: 6px; cursor: grab; }
.mc-block-card:hover { border-color: rgba(0,0,0,.18); }
.mc-block-card.selected { border-color: var(--menu-primary, #8a3324); border-style: solid; }
.mc-block-card.unavailable { opacity: .45; }
.mc-block-card.is-band { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.02); }
.mc-block-pic { max-width: 100%; height: auto; display: inline-block; }
.mc-block-qrbox { display: inline-block; aspect-ratio: 1; background: rgba(0,0,0,.08); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: rgba(0,0,0,.35); }
.mc-block-drop { display: inline-block; padding: 1rem .6rem; border: 1px dashed rgba(0,0,0,.25); border-radius: 6px; font-size: .78rem; color: #8a8078; }
.mc-block-cap { font-size: .72rem; opacity: .65; margin-top: .2rem; }
.mc-block-h { font-weight: 600; color: var(--menu-primary, #8a3324); outline: none; }
.mc-block-body, .mc-block-line { font-size: .82rem; outline: none; }
.mc-block-rule { display: inline-block; height: 0; border-top: 1px solid var(--menu-primary, #8a3324); opacity: .6; margin: .5rem 0; }
.mc-rule-dots { border-top-style: dotted; border-top-width: 2px; }
.mc-rule-ornament { border-top-style: double; border-top-width: 3px; }
.mc-block-space { height: 1.2rem; }
.mc-add-blocks { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.mc-add-block { border: 1px solid #e2dbd4; background: #fff; border-radius: 99px; padding: .2rem .6rem; font-size: .78rem; color: #6b625b; }
.mc-add-block:hover { border-color: var(--menu-primary, #8a3324); color: var(--menu-primary, #8a3324); }
.mc-page-thumb.drag-over {
  outline: 2px dashed var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

/* ===== v1.12: style cards preview the owner's own dishes ===== */
.mc-style-line-real { display: flex; align-items: baseline; gap: .3rem; font-size: .52rem; line-height: 1.5; padding-bottom: 1px; }
.mc-style-dish-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-style-price-text { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ===== v1.13: print preview panel on the Studio style step =====
   The sheet inside .mc-pv-stage is sized in real millimetres and scaled by
   JS, so proportions stay true to A4 and pt font sizes keep their correct
   relation to the page. Do not add px sizes inside the sheet. */
.mc-pv-panel {
  position: sticky; top: 0; z-index: 4;
  background: #f7f2ea; border: 1px solid #e7dccd; border-radius: .8rem;
  padding: .9rem 1rem 1rem; margin-bottom: 1.4rem;
}
.mc-pv-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.mc-pv-label { font-weight: 600; color: #2b2622; }
.mc-pv-format {
  font-size: .78rem; color: #6b6055; background: #fff;
  border: 1px solid #e7dccd; border-radius: 999px; padding: .1rem .6rem;
}
.mc-pv-spin { font-size: .78rem; color: #6b6055; margin-left: auto; }
.mc-pv-hint { font-size: .8rem; color: #6b6055; margin: .7rem 0 0; text-align: center; }
.mc-pv-stage { display: flex; justify-content: center; overflow: hidden; }

.mc-pv-sheet {
  position: relative; box-sizing: border-box; flex: none;
  transform-origin: top center;
  box-shadow: 0 6px 22px rgba(43, 38, 34, .18);
  font-family: Georgia, "Times New Roman", serif;
}
.mc-pv-sheet { font-family: var(--pv-body-font, Georgia, "Times New Roman", serif); }
.mc-pv-title, .mc-pv-cat-name { font-family: var(--pv-head-font, Georgia, "Times New Roman", serif); }
.mc-pv-inner { position: relative; z-index: 1; height: 100%; overflow: hidden; }

.mc-pv-title { font-size: var(--pv-title, 26pt); font-weight: 700; padding-bottom: 2mm; margin-bottom: 4mm; }
.mc-pv-cols { display: flex; align-items: flex-start; }
.mc-pv-col { flex: none; }
.mc-pv-cat { margin-bottom: 5mm; }
.mc-pv-cat-name { font-size: var(--pv-cat, 15pt); font-weight: 700; margin-bottom: 1.5mm; }
.mc-pv-cat-desc { font-size: var(--pv-cat-desc, 9pt); font-style: italic; margin-bottom: 2mm; opacity: .8; }
/* v1.22 blocks in the preview: placeholders, not pictures. */
.mc-pv-block { margin: 2mm 0; }
.mc-pv-block-box { display: inline-block; background: rgba(0,0,0,.09); border-radius: 1mm; }
.mc-pv-block-cap { font-size: var(--pv-desc, 8pt); opacity: .6; margin-top: .8mm; }
.mc-pv-block-name { font-size: var(--pv-cat, 11pt); font-family: var(--pv-head-font); }
.mc-pv-block-line { font-size: var(--pv-desc, 8pt); opacity: .8; }
.mc-pv-block-rule { height: 0; margin: 1.5mm 0; }
.mc-pv-item { margin-bottom: 1.4mm; }
.mc-pv-line { display: flex; align-items: baseline; gap: 1.5mm; }
.mc-pv-name { font-size: var(--pv-name, 11pt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-pv-leader { flex: 1 1 auto; min-width: 3mm; }
.mc-pv-price { font-size: var(--pv-name, 11pt); font-weight: 600; white-space: nowrap; margin-left: auto; }
.mc-pv-price-inline .mc-pv-price { margin-left: 1.5mm; }
.mc-pv-desc { font-size: var(--pv-desc, 8.5pt); margin: .3mm 0 0 var(--pv-indent, 6mm); line-height: 1.25; }
.mc-pv-empty { font-size: 12pt; opacity: .7; text-align: center; margin-top: 20mm; }

/* Three columns print smaller, exactly as the PDF drops a size class. */
/* v1.15: sizes now come from MenuTypeService as inline custom properties on
   the sheet, so the tri-fold size class lives in one place shared with the
   PDF rather than being re-derived here. */

/* Where the sheet folds. Owners centre headings on creases without this. */
.mc-pv-fold {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 0.3mm dashed rgba(120, 110, 100, .45); z-index: 2;
}

/* ===== v1.14: choices left, sheet right =====
   The style step is a comparison task: "does my menu look right in this?"
   Comparison needs both halves on screen at once, so the page splits into a
   scrolling column of choices and a column that holds the sheet in place. */
.mc-style-preview-col { position: relative; }
.mc-style-preview-col .mc-pv-panel {
  position: sticky; top: 1rem; margin-bottom: 0;
}
.mc-style-choices .mc-studio-actions { margin-top: 1.6rem; }

/* Below lg the columns stack. The sheet goes first so a phone owner sees
   what they are choosing before the list of things to choose from. */
@media (max-width: 991.98px) {
  .mc-style-layout { flex-direction: column-reverse; }
  .mc-style-preview-col .mc-pv-panel { position: static; margin-bottom: 1.2rem; }
}

/* Numbered accordion — same shape as the step nav that got them here. */
.mc-acc-stack { margin-bottom: 1.6rem; }
.mc-acc {
  background: #fff; border: 1px solid #e7dccd; border-radius: .7rem;
  margin-bottom: .6rem; overflow: hidden;
}
.mc-acc[open] { border-color: #d8c8b2; box-shadow: 0 2px 10px rgba(43, 38, 34, .06); }
.mc-acc-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; cursor: pointer; list-style: none;
  font-weight: 600; color: #2b2622;
}
.mc-acc-head::-webkit-details-marker { display: none; }
.mc-acc-head:hover { background: #fbf7f1; }
.mc-acc-n {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #8a3324; color: #fff; font-size: .82rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.mc-acc-title { flex: 1 1 auto; }
.mc-acc-value {
  font-size: .78rem; font-weight: 500; color: #6b6055;
  background: #f7f2ea; border-radius: 999px; padding: .1rem .6rem;
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-acc-caret { flex: none; color: #a89a88; transition: transform .15s ease; }
.mc-acc[open] .mc-acc-caret { transform: rotate(180deg); }
.mc-acc-body {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .2rem .9rem .9rem; border-top: 1px solid #f0e8da;
  padding-top: .8rem;
}

.mc-style-grid-title {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1rem; font-weight: 600; color: #2b2622; margin: 0 0 .8rem;
}

/* -- v1.15: typography & density panel ---------------------------------- */
/* The chips are labels wrapping their own radio, so the whole word is the
   hit target — important when the owner is on a laptop trackpad and the
   difference between two settings is one word. */
.mc-type-body { display: block; }
.mc-type-group { margin-bottom: .75rem; }
.mc-type-legend {
  display: block; font-size: .78rem; font-weight: 600;
  color: #6b6259; margin-bottom: .35rem;
}
.mc-type-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.mc-type-chip { cursor: pointer; margin: 0; }
.mc-type-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mc-type-chip:focus-within { outline: 2px solid #8a3324; outline-offset: 2px; }
.mc-type-toggle {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; cursor: pointer; margin-top: .25rem;
}
.mc-type-note { font-size: .78rem; color: #7a716a; margin: .5rem 0 0; }
.mc-acc-type .mc-acc-value { font-variant-numeric: tabular-nums; }

/* v1.16 — badge shorthand and dish numbers on the Studio print preview.
   Sized in pt like everything else on the sheet so it scales with the page. */
.mc-pv-tag { font-size: .62em; font-weight: 700; letter-spacing: .03em; margin-left: .35em; white-space: nowrap; }
.mc-pv-no { font-variant-numeric: tabular-nums; opacity: .65; }

/* -------------------------------------------------------------------------
   v1.23 — the explanation layer.
   A "?" next to a label, and a note panel at the top of a page whose purpose
   needs stating before its buttons make sense. Deliberately quiet: help that
   shouts is help you learn to ignore.
   ------------------------------------------------------------------------- */
.mc-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: .3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    color: #5a6169;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
}
.mc-help:hover,
.mc-help:focus-visible {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    outline: none;
}
.popover { max-width: 300px; }
.popover-body { font-size: .82rem; line-height: 1.45; }

.mc-note {
    display: flex;
    gap: .85rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(13, 110, 253, .18);
    border-left: 4px solid var(--bs-primary, #0d6efd);
    border-radius: .6rem;
    background: rgba(13, 110, 253, .04);
}
.mc-note-icon { color: var(--bs-primary, #0d6efd); font-size: 1.35rem; line-height: 1; }
.mc-note-title { font-weight: 600; margin-bottom: .3rem; }
.mc-note-body { margin: 0; font-size: .875rem; color: #495057; }
.mc-note-steps { margin: .6rem 0 0; padding-left: 1.15rem; font-size: .85rem; color: #495057; }
.mc-note-steps li { margin-bottom: .2rem; }
.mc-note-warn {
    border-color: rgba(255, 193, 7, .35);
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, .07);
}
.mc-note-warn .mc-note-icon { color: #b8860b; }

/* Marketplace: what a template actually is. */
.mc-tpl-facts { margin: .6rem 0 0; padding: 0; list-style: none; font-size: .82rem; }
.mc-tpl-facts li { display: flex; gap: .45rem; margin-bottom: .3rem; color: #495057; }
.mc-tpl-facts i { flex: 0 0 auto; margin-top: .15rem; }
.mc-tpl-yes i { color: #198754; }
.mc-tpl-no i { color: #adb5bd; }

/* The price and its "?" belong together on one line; the install form may
   drop to the next line on a narrow card rather than squeezing the two. */
.mc-tpl-buy > .fw-bold { white-space: nowrap; }
.mc-tpl-buy > form { flex: 1 1 auto; min-width: 0; }
.mc-tpl-buy select { min-width: 0; }

/* v1.24 — the marketplace fitting room: the whole printed sheet, in the
   template's design, with the owner's own dishes on it. The sheet is laid
   out at true A4 size and only scaled by a transform, so type stays in
   correct proportion to the page. */
.mc-tpl-pv {
  background: #f6f2ec; border: 1px solid #e7dccd; border-radius: .6rem;
  padding: .8rem; min-height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.mc-tpl-pv-sheet { display: flex; justify-content: center; overflow: hidden; width: 100%; }
.mc-tpl-pv-sheet > * { transform-origin: top center; }
/* One of the two children is shown at a time; the pane says which. */
.mc-tpl-pv[data-state="ready"] .mc-tpl-pv-wait { display: none; }
.mc-tpl-pv[data-state="ready"] { align-items: flex-start; }
.mc-tpl-pv:not([data-state="ready"]) .mc-tpl-pv-sheet { display: none; }
.mc-tpl-pv[data-state="failed"] .spinner-border { display: none; }
.mc-tpl-pv-menu { max-width: 200px; }