/* MMC V9.2J17 Member Image Processor
   Red / white / black only. Browser-side image processing; no server upload. */
:root {
    --mmc-ip-red: #9b0d05;
    --mmc-ip-red-2: #bf1b17;
    --mmc-ip-red-3: #e13a33;
    --mmc-ip-black: #111111;
    --mmc-ip-white: #ffffff;
    --mmc-ip-soft: rgba(155,13,5,.08);
    --mmc-ip-line: rgba(17,17,17,.14);
    --mmc-ip-shadow: 0 18px 45px rgba(17,17,17,.16);
}

body.mmc-image-processor-page {
    margin: 0;
    min-height: 100vh;
    color: var(--mmc-ip-black);
    background:
        radial-gradient(circle at 18% 0%, rgba(191,27,23,.24), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #fffafa 46%, #ffffff 100%);
    font-family: Arial, Helvetica, sans-serif;
}

.mmc-ip-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 48px; }
.mmc-ip-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px; border: 1px solid var(--mmc-ip-line); border-radius: 26px; background: var(--mmc-ip-white); box-shadow: var(--mmc-ip-shadow); }
.mmc-ip-logo { width: 92px; height: 92px; object-fit: contain; border-radius: 18px; box-shadow: 0 8px 25px rgba(17,17,17,.12); }
.mmc-ip-eyebrow { margin: 0 0 6px; color: var(--mmc-ip-red); text-transform: uppercase; font-weight: 900; letter-spacing: .08em; font-size: 13px; }
.mmc-ip-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 62px); line-height: .95; color: var(--mmc-ip-black); }
.mmc-ip-hero p { max-width: 740px; margin: 10px 0 0; font-size: 17px; line-height: 1.55; }
.mmc-ip-back { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border-radius: 999px; background: var(--mmc-ip-black); color: var(--mmc-ip-white); text-decoration: none; font-weight: 900; white-space: nowrap; }
.mmc-ip-back:hover { background: var(--mmc-ip-red); color: var(--mmc-ip-white); }

.mmc-ip-privacy-card { margin: 18px 0; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(155,13,5,.28); background: var(--mmc-ip-soft); color: var(--mmc-ip-black); line-height: 1.45; }

.mmc-ip-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
.mmc-ip-upload-zone, .mmc-ip-controls, .mmc-ip-help, .mmc-ip-results .mmc-ip-result-card, .mmc-ip-summary { background: var(--mmc-ip-white); border: 1px solid var(--mmc-ip-line); border-radius: 24px; box-shadow: 0 12px 34px rgba(17,17,17,.10); }
.mmc-ip-upload-zone { position: relative; min-height: 330px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px dashed rgba(155,13,5,.34); cursor: pointer; }
.mmc-ip-upload-zone.mmc-ip-dragover { border-color: var(--mmc-ip-red); background: var(--mmc-ip-soft); }
.mmc-ip-upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mmc-ip-upload-icon { width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--mmc-ip-white); background: linear-gradient(135deg, var(--mmc-ip-red), #710800); font-size: 52px; font-weight: 300; line-height: 1; box-shadow: 0 13px 28px rgba(155,13,5,.28); }
.mmc-ip-upload-zone h2 { margin: 18px 0 8px; font-size: 30px; }
.mmc-ip-upload-zone p { margin: 0 0 12px; }
.mmc-ip-upload-zone span { color: var(--mmc-ip-red); font-weight: 900; }

.mmc-ip-controls { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.mmc-ip-controls label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.mmc-ip-controls select, .mmc-ip-controls input[type="number"] { width: 100%; box-sizing: border-box; border: 1px solid var(--mmc-ip-line); border-radius: 14px; padding: 12px 13px; color: var(--mmc-ip-black); background: var(--mmc-ip-white); font-size: 15px; outline: none; }
.mmc-ip-controls input[type="range"] { accent-color: var(--mmc-ip-red); }
.mmc-ip-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mmc-ip-check { flex-direction: row !important; align-items: center; gap: 10px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; }
.mmc-ip-check input { width: 18px; height: 18px; accent-color: var(--mmc-ip-red); }
.mmc-ip-primary, .mmc-ip-secondary, .mmc-ip-download { border: 0; cursor: pointer; border-radius: 999px; min-height: 46px; padding: 12px 18px; font-weight: 900; font-size: 15px; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.mmc-ip-primary, .mmc-ip-download { color: var(--mmc-ip-white); background: linear-gradient(135deg, var(--mmc-ip-red-2), #710800); box-shadow: 0 8px 18px rgba(155,13,5,.22); }
.mmc-ip-secondary { color: var(--mmc-ip-red); background: var(--mmc-ip-white); border: 1px solid rgba(155,13,5,.28); }
.mmc-ip-primary:hover, .mmc-ip-secondary:hover, .mmc-ip-download:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(155,13,5,.18); }
.mmc-ip-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.mmc-ip-summary { margin: 20px 0; padding: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mmc-ip-summary div { padding: 13px; border-radius: 16px; background: var(--mmc-ip-soft); text-align: center; }
.mmc-ip-summary strong { display: block; font-size: 20px; color: var(--mmc-ip-red); }
.mmc-ip-summary span { font-size: 12px; font-weight: 800; text-transform: uppercase; }

.mmc-ip-results { display: grid; gap: 16px; margin-top: 20px; }
.mmc-ip-result-card { padding: 16px; display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center; }
.mmc-ip-result-card img { width: 120px; height: 90px; object-fit: contain; border-radius: 14px; background: var(--mmc-ip-soft); border: 1px solid var(--mmc-ip-line); }
.mmc-ip-result-card h3 { margin: 0 0 8px; font-size: 17px; }
.mmc-ip-result-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.mmc-ip-result-meta span { padding: 6px 9px; border-radius: 999px; border: 1px solid var(--mmc-ip-line); }
.mmc-ip-result-card.mmc-ip-error { border-color: rgba(155,13,5,.45); background: rgba(155,13,5,.06); }

.mmc-ip-help { margin-top: 24px; padding: 22px; }
.mmc-ip-help h2 { margin: 0 0 14px; }
.mmc-ip-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mmc-ip-help article { padding: 16px; border-radius: 18px; border: 1px solid var(--mmc-ip-line); background: var(--mmc-ip-soft); }
.mmc-ip-help strong, .mmc-ip-help span { display: block; }
.mmc-ip-help span { margin-top: 6px; line-height: 1.45; }

/* Paid/full-member side-menu injected button. This does not change existing app links. */
body.mmc-v92j17-image-processor-side-menu .mmc-v92j17-image-processor-menu-row {
    border-left-color: var(--mmc-menu-red, #9b0d05) !important;
    color: var(--mmc-menu-red, #9b0d05) !important;
    font-weight: 900 !important;
}
body.mmc-v92j17-image-processor-side-menu .mmc-v92j17-image-processor-menu-row .mmc-v92j17-image-processor-menu-icon { width: 21px; min-width: 21px; margin-right: 12px; text-align: center; line-height: 1; }
body.mmc-v92j17-image-processor-side-menu .mmc-v92j17-image-processor-menu-row:hover { background: linear-gradient(135deg, var(--mmc-menu-red, #9b0d05), #710800) !important; color: #fff !important; }
body.mmc-v92j17-image-processor-side-menu .mmc-v92j17-image-processor-menu-badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 16px; padding: 0 6px; border-radius: 999px; background: var(--mmc-menu-red, #9b0d05); color: #fff; border: 1px solid #fff; font-size: 8px; font-weight: 900; letter-spacing: .02em; }
body.mmc-v92j17-image-processor-side-menu .mmc-v92j17-image-processor-menu-row:hover .mmc-v92j17-image-processor-menu-badge { background: #fff; color: var(--mmc-menu-red, #9b0d05); }

@media (max-width: 820px) {
    .mmc-ip-shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
    .mmc-ip-hero { grid-template-columns: 1fr; text-align: center; }
    .mmc-ip-logo-link { margin: 0 auto; }
    .mmc-ip-back { width: fit-content; margin: 0 auto; }
    .mmc-ip-panel, .mmc-ip-help-grid { grid-template-columns: 1fr; }
    .mmc-ip-summary { grid-template-columns: 1fr 1fr; }
    .mmc-ip-result-card { grid-template-columns: 92px 1fr; }
    .mmc-ip-result-card img { width: 92px; height: 78px; }
    .mmc-ip-result-card .mmc-ip-download { grid-column: 1 / -1; width: 100%; }
}

/* MMC V9.2J17A — smart smallest / never-larger safety note */
.mmc-ip-smart-note {
    margin-top: -2px;
    padding: 11px 13px;
    border-radius: 14px;
    background: #fff7f4;
    border: 1px solid rgba(155,13,5,.20);
    color: #43110e;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}
.mmc-ip-result-meta .mmc-ip-result-note {
    flex-basis: 100%;
    border-color: rgba(155,13,5,.22);
    background: #fff7f4;
    color: #43110e;
    border-radius: 12px;
}

/* MMC V9.2J17B — editor hamburger Image Processor link.
   Uses the existing editor menu button style and adds only the small NEW badge. */
.toolBarMenuContainer .mmc-v92j17-editor-image-processor-link {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    margin: 0 0 8px 0 !important;
}
.toolBarMenuContainer .mmc-v92j17-editor-image-processor-link:hover,
.toolBarMenuContainer .mmc-v92j17-editor-image-processor-link:focus {
    text-decoration: none !important;
}
.toolBarMenuContainer .mmc-v92j17-editor-image-processor-button {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.toolBarMenuContainer .mmc-v92j17-editor-image-processor-icon {
    line-height: 1 !important;
}
.toolBarMenuContainer .mmc-v92j17-editor-image-processor-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    height: 15px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #9b0d05 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    line-height: 1 !important;
}
.toolBarMenuContainer .mmc-v92j17-editor-image-processor-button:hover .mmc-v92j17-editor-image-processor-badge {
    background: #ffffff !important;
    color: #9b0d05 !important;
    border-color: #9b0d05 !important;
}

/* ========================================================================
   MMC V9.2J17C — SPA menu stability + editor toolbar fallback polish
   Loaded from welcome.blade.php with a fresh cache key so browser/SPAs do not
   keep showing old toolbar/menu styling after /account <-> /editor navigation.
   ======================================================================== */
.toolBar .mmc-v92j17c-editor-menu-report-bug-hidden,
.toolBarMenuContainer .mmc-v92j17c-editor-menu-report-bug-hidden {
    display: none !important;
}

/* Fallback copy of the V9.2J16B toolbar visual match in a cache-busted file.
   Protects the green creative buttons. */
.toolBar button:not(.btn-success):not(.menu-button-active):not([class*="success"]),
.toolBar .btn:not(.btn-success):not(.menu-button-active):not([class*="success"]) {
    min-height: 31px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 12px !important;
    border: 1px solid rgba(155, 13, 5, .22) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fff8f7 52%, #ffd9d5 100%) !important;
    color: #9b0d05 !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    box-shadow: 0 2px 0 rgba(95,0,0,.14), 0 5px 12px rgba(95,0,0,.10) !important;
    text-shadow: none !important;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease !important;
}

.toolBar button:not(.btn-success):not(.menu-button-active):not([class*="success"]):hover,
.toolBar button:not(.btn-success):not(.menu-button-active):not([class*="success"]):focus,
.toolBar .btn:not(.btn-success):not(.menu-button-active):not([class*="success"]):hover,
.toolBar .btn:not(.btn-success):not(.menu-button-active):not([class*="success"]):focus {
    background: linear-gradient(180deg, #ffffff 0%, #fffefe 48%, #ffc7c0 100%) !important;
    color: #710800 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 0 rgba(95,0,0,.13), 0 8px 16px rgba(95,0,0,.14) !important;
}

.toolBar button:not(.btn-success):not(.menu-button-active):not([class*="success"]):active,
.toolBar .btn:not(.btn-success):not(.menu-button-active):not([class*="success"]):active {
    transform: translateY(1px) !important;
    box-shadow: inset 0 2px 5px rgba(95,0,0,.16), 0 1px 0 rgba(95,0,0,.12) !important;
}

.toolBar button:not(.btn-success):not(.menu-button-active):not([class*="success"]) svg,
.toolBar button:not(.btn-success):not(.menu-button-active):not([class*="success"]) i,
.toolBar button:not(.btn-success):not(.menu-button-active):not([class*="success"]) .toolBarIcon,
.toolBar .btn:not(.btn-success):not(.menu-button-active):not([class*="success"]) svg,
.toolBar .btn:not(.btn-success):not(.menu-button-active):not([class*="success"]) i,
.toolBar .btn:not(.btn-success):not(.menu-button-active):not([class*="success"]) .toolBarIcon {
    color: #9b0d05 !important;
    fill: currentColor !important;
}

.toolBar button.btn-success,
.toolBar .btn-success,
.toolBar button.menu-button-active,
.toolBar .menu-button-active,
.toolBar button[class*="success"],
.toolBar .btn[class*="success"] {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}