/* /Components/Reusable/Inputs/ImageCropDialog.razor.rz.scp.css */
.image-crop-dialog[b-3u85wog2tr] {
    width: min(920px, 92vw);
}

.crop-preview-shell[b-3u85wog2tr] {
    position: relative;
    display: grid;
    min-height: 260px;
    place-items: center;
    overflow: hidden;
    padding: 1rem;
    border-radius: 12px;
    background: #17191c;
}

.crop-canvas[b-3u85wog2tr] {
    display: block;
    max-width: 100%;
    max-height: 54vh;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    cursor: grab;
    touch-action: none;
    background-color: #fff;
    background-image: linear-gradient(45deg, #e9ecef 25%, transparent 25%),
        linear-gradient(-45deg, #e9ecef 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e9ecef 75%),
        linear-gradient(-45deg, transparent 75%, #e9ecef 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.crop-canvas:active[b-3u85wog2tr] {
    cursor: grabbing;
}

.crop-loading[b-3u85wog2tr] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: #fff;
    background: rgba(23, 25, 28, .84);
}

.crop-controls[b-3u85wog2tr] {
    display: grid;
    gap: 1rem;
    padding-top: 1.15rem;
}

.crop-section-title[b-3u85wog2tr] {
    margin-bottom: .55rem;
    font-size: .82rem;
    font-weight: 600;
    color: #5d6169;
}

.crop-preset-grid[b-3u85wog2tr] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.crop-preset[b-3u85wog2tr] {
    display: flex;
    min-height: 66px;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    text-align: left;
    color: #464950;
    border: 1px solid #d9dce1;
    border-radius: 9px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.crop-preset:hover[b-3u85wog2tr] {
    border-color: var(--bs-warning, #ff9f43);
}

.crop-preset.active[b-3u85wog2tr] {
    border-color: var(--bs-warning, #ff9f43);
    background: rgba(255, 159, 67, .08);
    box-shadow: 0 0 0 2px rgba(255, 159, 67, .13);
}

.crop-preset > i[b-3u85wog2tr] {
    flex: 0 0 auto;
    font-size: 1.4rem;
}

.crop-preset span:last-child[b-3u85wog2tr] {
    display: grid;
    min-width: 0;
}

.crop-preset strong[b-3u85wog2tr] {
    font-size: .82rem;
    line-height: 1.2;
}

.crop-preset small[b-3u85wog2tr] {
    margin-top: .2rem;
    overflow: hidden;
    font-size: .7rem;
    line-height: 1.25;
    color: #7b7f87;
}

.preset-icon[b-3u85wog2tr] {
    display: inline-block;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.preset-square[b-3u85wog2tr] {
    width: 20px;
    height: 20px;
}

.preset-wide[b-3u85wog2tr] {
    width: 25px;
    height: 14px;
}

.custom-ratio-row[b-3u85wog2tr],
.zoom-row[b-3u85wog2tr] {
    display: flex;
    align-items: end;
    gap: .65rem;
}

.custom-ratio-row label[b-3u85wog2tr] {
    display: grid;
    gap: .25rem;
    font-size: .74rem;
    color: #6d7178;
}

.custom-ratio-row input[b-3u85wog2tr] {
    width: 78px;
    padding: .4rem .5rem;
    border: 1px solid #d5d8dd;
    border-radius: 6px;
}

.custom-ratio-row > span[b-3u85wog2tr] {
    padding-bottom: .45rem;
    font-weight: 600;
}

.zoom-row[b-3u85wog2tr] {
    align-items: center;
}

.zoom-row label[b-3u85wog2tr] {
    font-size: .8rem;
    font-weight: 600;
}

.zoom-row input[b-3u85wog2tr] {
    flex: 1 1 auto;
    accent-color: var(--bs-warning, #ff9f43);
}

.zoom-row > span[b-3u85wog2tr] {
    width: 3.25rem;
    font-size: .78rem;
    text-align: right;
    color: #696d74;
}

.zoom-row.is-disabled[b-3u85wog2tr] {
    opacity: .55;
}

.crop-hint[b-3u85wog2tr] {
    font-size: .76rem;
    color: #70747b;
}

@media (max-width: 767px) {
    .crop-preset-grid[b-3u85wog2tr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crop-preview-shell[b-3u85wog2tr] {
        min-height: 210px;
        padding: .65rem;
    }
}