/* ==========================================================================
   TOOL BLOCK START - crop-image
   Crop Image - UnitConverterTool.com
   Silo: Image Tools   Accent: #4a90ff   Hover: #3a7fee
   Self-contained. Built to tool-build.md sections 1 and 3.
   The 10 SEO widget styles get appended after the END banner.
   ========================================================================== */

/* ---- 3a. ROOT AND HEADING ---- */
.uct-tool {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: 'DM Sans', sans-serif;
    color: #e5e7eb;
}
.uct-tool_heading { text-align: center; margin-bottom: 28px; }
.uct-tool_heading h1 { font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.uct-tool_description { font-size: 15px; color: #9ca3af; margin: 0; line-height: 1.6; }

/* ---- 3b. LAYOUT ---- */
.uct-tool-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1024px) {
    .uct-tool-layout { grid-template-columns: 1fr; }
}

/* ---- 3c. UPLOAD AREA ---- */
.uct-upload-area {
    background: #1a1f2e;
    border: 2px dashed #3a4258;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    transition: border-color .2s ease, background .2s ease;
}
.uct-upload-area.drag-over { border-color: #4a90ff; background: #1e2538; }
.uct-upload-area h3 { font-size: 18px; font-weight: 600; color: #e5e7eb; margin: 16px 0 6px; }
.uct-upload-area p { font-size: 14px; color: #9ca3af; margin: 0 0 14px; }
.upload-icon svg { stroke: #4a90ff; }
.uct-hidden-input { display: none; }
.uct-tool_drop-text { font-size: 13px; color: #6b7280; margin-top: 14px; }

.uct-trust-strip {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid #2a3348;
}
.uct-trust-strip span { font-size: 12px; color: #9ca3af; }
.uct-helper-text { font-size: 13px; color: #9ca3af; margin: 10px 0 0; }
/* .uct-upload-area p (above) outranks .uct-helper-text and would zero its top
   margin, leaving the import helper text touching the Select Images button.
   This more specific rule restores the intended gap. */
.uct-upload-area .uct-helper-text { margin: 14px 0 0; }

/* ---- 3d. CLOUD SPLIT BUTTON ---- */
.uct-dropdown-container { position: relative; display: inline-block; }
.uct-split-btn-group { display: flex; }

.uct-btn-main {
    background: #4a90ff; color: #fff; border: none;
    padding: 12px 22px; border-radius: 8px 0 0 8px;
    font-family: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; min-height: 44px; transition: background .15s ease;
}
.uct-btn-main:hover { background: #3a7fee; }

.uct-btn-arrow {
    background: #4a90ff; color: #fff;
    border: none; border-left: 1px solid rgba(255,255,255,.2);
    padding: 12px 14px; border-radius: 0 8px 8px 0;
    cursor: pointer; min-height: 44px; display: flex; align-items: center;
}
.uct-btn-arrow:hover { background: #3a7fee; }

.uct-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 220px; background: #252d3f; border: 1px solid #3a4258;
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 30; overflow: hidden;
}
.uct-dropdown-menu.show { display: block; }

.uct-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; min-height: 44px;
    font-size: 14px; color: #e5e7eb; cursor: pointer;
    transition: background .12s ease;
}
.uct-dropdown-item:hover { background: #1e2538; }
.uct-dropdown-item:focus-visible { background: #1e2538; outline: 2px solid #4a90ff; outline-offset: -2px; }
.uct-dropdown-item svg { flex-shrink: 0; }

/* ---- 3d-crop. CROP STAGE ---- */
.uct-crop-stage {
    background: #1a1f2e;
    border: 1px solid #3a4258;
    border-radius: 12px;
    padding: 12px;
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease;
}
/* The stage is a drop target too, since the upload area is hidden behind it. */
.uct-crop-stage.drag-over { border-color: #4a90ff; background: #1e2538; }
/* Direct child only. Cropper.js clones the image into its own container and
   sizes that clone itself; a bare `.uct-crop-stage img` would also hit the
   clone and the filmstrip thumbnails, and fight both. */
.uct-crop-stage > img {
    display: block;
    max-width: 100%;
    max-height: 520px;            /* Cropper sizes its container from this */
}

/* Batch file switcher. Rendered only when more than one file is loaded. */
.uct-crop-filmstrip {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 12px 2px 4px; margin-top: 10px; border-top: 1px solid #2a3348;
}
.uct-crop-thumb {
    flex: 0 0 auto; width: 56px; height: 56px; padding: 0;
    background: #252d3f; border: 2px solid #3a4258; border-radius: 8px;
    overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s ease;
}
.uct-crop-thumb img { display: block; max-width: 100%; max-height: 100%; }
.uct-crop-thumb:hover  { border-color: #4a90ff; }
.uct-crop-thumb.active { border-color: #4a90ff; }
.uct-crop-thumb:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }

/* The stage takes focus so the arrow keys can nudge the crop box. */
.uct-crop-stage:focus { outline: none; }
.uct-crop-stage:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }

/* CROPPER THEME OVERRIDE. Cropper defaults to #39f, which is not our accent.
 * The lazy <link> is appended to document.head at runtime, so it lands AFTER
 * cropimage.css in the cascade. #crop-image .cropper-point (0,1,1) still beats
 * .cropper-point (0,1,0) on specificity, so these win with zero !important. */
#crop-image .cropper-view-box  { outline: 1px solid #4a90ff; outline-color: #4a90ff; }
#crop-image .cropper-line,
#crop-image .cropper-point     { background-color: #4a90ff; }
/* Cropper shares `opacity: .1` across .cropper-face, .cropper-line and
 * .cropper-point, then re-raises only the point to .75. The edge handles are
 * therefore left at 10 percent, which is invisible on a #1a1f2e stage however
 * the accent is set. Raising the line is a fix, not a restyle. */
#crop-image .cropper-line      { opacity: .5; }
#crop-image .cropper-point     { width: 12px; height: 12px; opacity: 1; }  /* touch */
#crop-image .cropper-point.point-se { width: 14px; height: 14px; }
#crop-image .cropper-modal     { background-color: #000; opacity: .62; }
#crop-image .cropper-dashed    { border-color: rgba(255,255,255,.32); }
#crop-image .cropper-center::before,
#crop-image .cropper-center::after { background-color: #4a90ff; }

/* The stage toolbar pairs an SVG with a text label inside .uct-secondary-btn.
 * Scoped to this one toolbar so the shared button component is unchanged. */
#stage-tools-crop-image .uct-secondary-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
#stage-tools-crop-image .uct-secondary-btn svg { flex-shrink: 0; }

/* ---- 3e. OPTIONS PANEL, SLIDER, TABS, PRESETS ---- */
.uct-options-panel {
    background: #1a1f2e; border: 1px solid #3a4258; border-radius: 12px;
    overflow: hidden;
}
.uct-options-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; min-height: 44px; cursor: pointer; user-select: none;
}
.uct-options-toggle-left {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: #e5e7eb;
}
.uct-options-toggle-arrow { color: #9ca3af; transition: transform .2s ease; }
.uct-options-panel.collapsed .uct-options-toggle-arrow { transform: rotate(-90deg); }

.uct-options-summary { font-size: 12px; font-weight: 400; color: #9ca3af; }

/* visibility, not just height. Without it the collapsed panel keeps all 21
   controls inside it focusable and in the accessibility tree at zero height,
   and collapsed is the DEFAULT state on mobile. The delay on the collapsed rule
   lets the slide finish before the content is removed; the base rule's 0s delay
   brings it straight back on expand. */
.uct-options-body {
    max-height: 2000px; overflow: hidden;
    padding: 0 18px 18px;
    visibility: visible;
    transition: max-height .25s ease, padding .25s ease, visibility 0s linear 0s;
}
.uct-options-panel.collapsed .uct-options-body {
    max-height: 0; padding-top: 0; padding-bottom: 0;
    visibility: hidden;
    transition: max-height .25s ease, padding .25s ease, visibility 0s linear .25s;
}

.uct-options-section { padding-top: 16px; }
.uct-options-section + .uct-options-section {
    margin-top: 16px; border-top: 1px solid #2a3348;
}
.uct-options-section-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}

/* SLIDER */
.uct-slider-row { display: flex; align-items: center; gap: 14px; }
.uct-slider-track {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 3px; outline: none; cursor: pointer;
    background: linear-gradient(to right,
        #4a90ff 0%, #4a90ff var(--uct-fill, 0%),
        #3a4258 var(--uct-fill, 0%), #3a4258 100%);
}
.uct-slider-track::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: transparent; }
.uct-slider-track::-moz-range-track { height: 6px; border-radius: 3px; background: transparent; }
.uct-slider-track::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%; background: #4a90ff;
    border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: pointer;
}
.uct-slider-track::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #4a90ff;
    border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: pointer;
}
.uct-slider-value {
    min-width: 44px; text-align: right; font-size: 14px; font-weight: 600; color: #e5e7eb;
}
.uct-slider-labels {
    display: flex; justify-content: space-between;
    font-size: 12px; color: #6b7280; margin-top: 6px;
}

/* TABS */
.uct-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.uct-tab {
    flex: 1; min-width: 70px; min-height: 44px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #252d3f; border: 1px solid #3a4258; border-radius: 8px;
    padding: 10px 12px; font-family: inherit; font-size: 13px; font-weight: 600;
    color: #9ca3af; cursor: pointer; transition: all .15s ease;
}
.uct-tab:hover { border-color: #4a90ff; color: #e5e7eb; }
.uct-tab.active { background: #4a90ff; border-color: #4a90ff; color: #fff; }

/* SUB-PANELS */
.uct-subpanel { display: none; margin-top: 14px; }
.uct-subpanel.active { display: block; }
.uct-subpanel-title { font-size: 13px; font-weight: 600; color: #e5e7eb; margin-bottom: 10px; }

/* NUMBER INPUT PAIR */
.uct-input-row { display: flex; align-items: flex-end; gap: 10px; }
.uct-input-row + .uct-input-row { margin-top: 10px; }
.uct-input-group { flex: 1; min-width: 0; }
.uct-input-group label {
    display: block; font-size: 12px; color: #9ca3af; margin-bottom: 5px;
}
.uct-input-group input,
.uct-input-field {
    width: 100%; box-sizing: border-box;
    background: #1e2538; border: 1px solid #3a4258; border-radius: 6px;
    padding: 10px 12px; min-height: 44px;
    font-family: inherit; font-size: 14px; color: #e5e7eb;
}
.uct-input-group input:focus,
.uct-input-field:focus { outline: none; border-color: #4a90ff; }
.uct-input-group input:disabled { opacity: .55; cursor: not-allowed; }

/* ASPECT LOCK */
.uct-aspect-lock {
    background: #252d3f; border: 1px solid #3a4258; border-radius: 6px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #9ca3af; flex-shrink: 0;
}
.uct-aspect-lock.locked { border-color: #4a90ff; color: #4a90ff; }
.uct-aspect-lock .lock-icon { display: none; }
.uct-aspect-lock .unlock-icon { display: block; }
.uct-aspect-lock.locked .lock-icon { display: block; }
.uct-aspect-lock.locked .unlock-icon { display: none; }

/* PRESET CARDS */
.uct-preset-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
}
.uct-preset-card {
    background: #252d3f; border: 1px solid #3a4258; border-radius: 8px;
    padding: 10px; text-align: center; cursor: pointer; transition: all .15s ease;
}
.uct-preset-card:hover { border-color: #4a90ff; }
.uct-preset-card.selected { background: #1e2538; border-color: #4a90ff; }
.uct-preset-card:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }
.uct-preset-name { font-size: 13px; font-weight: 600; color: #e5e7eb; }
/* The ratio is the ONLY thing distinguishing the two Portrait cards, so it is
   text a user must read. tool-build.md 1a: #6b7280 is decoration only and fails
   WCAG AA. Use the secondary text colour. */
.uct-preset-dims { font-size: 11px; color: #9ca3af; margin-top: 2px; }

/* ---- 3f. ACTIONS ---- */
.uct-action-btn-primary {
    width: 100%; margin-top: 14px; min-height: 52px;
    background: #1a2542; color: #fff;
    border: 1px solid #4a90ff; border-radius: 10px;
    font-family: inherit; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: background .15s ease;
}
.uct-action-btn-primary:hover:not(:disabled) { background: #222f52; }
.uct-action-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.uct-action-btn-primary.is-busy { pointer-events: none; opacity: .7; }
.uct-action-btn-primary.is-busy::after {
    content: ''; display: inline-block; margin-left: 10px;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
    animation: uct-spin .7s linear infinite; vertical-align: middle;
}
@keyframes uct-spin { to { transform: rotate(360deg); } }

.uct-controls-area {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0;
}
.uct-action-btn {
    background: #4a90ff; color: #fff; border: none; border-radius: 8px;
    padding: 12px 22px; min-height: 44px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.uct-action-btn:hover:not(:disabled) { background: #3a7fee; }
.uct-action-btn:disabled { opacity: .5; cursor: not-allowed; }

.uct-secondary-btn, .uct-rerun-btn {
    background: transparent; color: #9ca3af;
    border: 1px solid #3a4258; border-radius: 8px;
    padding: 12px 22px; min-height: 44px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.uct-secondary-btn:hover, .uct-rerun-btn:hover { border-color: #4a90ff; color: #e5e7eb; }
.uct-secondary-btn:disabled { opacity: .5; cursor: not-allowed; }

/* STICKY PRIMARY ACTION ON MOBILE */
@media (max-width: 768px) {
    .uct-tool.uct-has-input .uct-action-btn-primary {
        position: fixed; left: 16px; right: 16px; bottom: 16px;
        width: auto; z-index: 40; box-shadow: 0 6px 20px rgba(0,0,0,.5);
    }
    .uct-tool.uct-has-input .uct-results,
    .uct-tool.uct-has-input .uct-privacy-note { padding-bottom: 80px; }
}

/* ---- 3g. RESULTS ---- */
.uct-file-item {
    background: #1a1f2e; border: 1px solid #3a4258; border-radius: 10px;
    padding: 14px; margin-bottom: 10px;
}
.uct-file-item-row { display: flex; align-items: center; gap: 14px; }
.uct-file-thumb {
    width: 56px; height: 56px; flex-shrink: 0;
    background: #252d3f; border-radius: 6px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.uct-file-thumb canvas, .uct-file-thumb img { max-width: 100%; max-height: 100%; }
.uct-file-info { flex: 1; min-width: 0; }
.uct-file-name {
    font-size: 14px; font-weight: 600; color: #e5e7eb;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uct-file-meta { font-size: 12px; color: #9ca3af; margin-top: 3px; }
.uct-file-status { font-size: 12px; color: #9ca3af; margin-top: 3px; }

.uct-progress-bar {
    height: 4px; background: #2a3348; border-radius: 2px;
    overflow: hidden; margin-top: 7px;
}
.uct-progress-fill {
    height: 100%; width: 0; background: #4a90ff; transition: width .2s ease;
}

.uct-size-compare { font-size: 12px; margin-top: 4px; }
.uct-size-decreased { color: #4ade80; }
.uct-size-increased { color: #fbbf24; }
.uct-size-same { color: #9ca3af; }

.uct-action-area { display: flex; gap: 8px; flex-shrink: 0; align-items: center; flex-wrap: wrap; }
.uct-download-link {
    background: #4a90ff; color: #fff; text-decoration: none;
    padding: 8px 16px; min-height: 44px; border-radius: 6px;
    display: inline-flex; align-items: center;
    font-size: 13px; font-weight: 600;
}
.uct-download-link:hover { background: #3a7fee; color: #fff; }

/* ---- 3h. MESSAGES, NOTES, UTILITY ---- */
.uct-error-msg {
    background: rgba(192,57,43,.12); border: 1px solid #c0392b; border-radius: 8px;
    padding: 12px 16px; margin-bottom: 10px; font-size: 13px; color: #e5e7eb;
}
.uct-error-text { color: #c0392b; font-size: 12px; }

.uct-output-note, .uct-privacy-note {
    font-size: 12px; color: #9ca3af; text-align: center;
    line-height: 1.6; margin: 14px 0 0;
}
.uct-hidden { display: none !important; }

.uct-tool a:not(.uct-download-link):not(.uct-action-btn) { color: #4a90ff; }

/* ---- 3h-cloud. URL-IMPORT MODAL (injected by cloud-handlers.js) ---- */
.uct-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(0,0,0,.66);
}
.uct-modal-content {
    width: 100%; max-width: 460px;
    background: #111B2E; border: 1px solid #26324a; border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden;
}
.uct-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid #26324a;
}
.uct-modal-header h3 { margin: 0; font-size: 16px; color: #e5e7eb; }
.uct-modal-close {
    background: none; border: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: #9ca3af; padding: 4px 8px;
}
.uct-modal-close:hover { color: #e5e7eb; }
.uct-modal-body { padding: 18px; }
.uct-modal-info { margin: 0 0 12px; font-size: 13px; color: #9ca3af; line-height: 1.6; }
.uct-modal-note { margin: 10px 0 0; font-size: 12px; color: #9ca3af; line-height: 1.6; }
.uct-modal-footer {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 18px; border-top: 1px solid #26324a;
}
@media (max-width: 480px) {
    .uct-modal-footer { flex-direction: column-reverse; }
    .uct-modal-footer .uct-action-btn,
    .uct-modal-footer .uct-secondary-btn { width: 100%; }
}

/* ---- 3i. MOBILE ---- */
@media (max-width: 768px) {
    .uct-tool { padding: 0 16px; overflow-x: hidden; }
    .uct-tool_heading h1 { font-size: 24px; }
    .uct-upload-area { padding: 28px 16px; }
    .uct-file-item-row { flex-wrap: wrap; }
    .uct-action-area { width: 100%; }
    .uct-download-link { flex: 1; justify-content: center; }
    .uct-preset-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .uct-crop-stage { padding: 8px; }
    .uct-crop-stage > img { max-height: 360px; }
    #stage-tools-crop-image .uct-secondary-btn { padding: 12px 14px; font-size: 13px; }
}
@media (max-width: 480px) {
    .uct-tool_heading h1 { font-size: 21px; }
    .uct-trust-strip { flex-direction: column; gap: 7px; }
    .uct-tabs { flex-direction: column; }
    .uct-tab { width: 100%; }
    .uct-input-row { flex-wrap: wrap; }
    .uct-crop-stage > img { max-height: 300px; }
}

/* ==========================================================================
   TOOL BLOCK END - crop-image
   ========================================================================== */