/* -------- Image Cropper Overlay -------- */

.crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pill-gap);
}

.crop-container {
    background: #ffffff;
    border-radius: var(--medium-gap);
    padding: var(--medium-gap) var(--pill-gap) var(--pill-gap) var(--pill-gap);
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pill-gap);
}

.crop-container h3 {
    padding-top: 0;
    margin: 0;
}

/* -------- Crop Viewport -------- */

.crop-viewport {
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: none;
    border-radius: var(--pill-gap);
    border: 1px solid var(--text-color);
    background: var(--gray-bg);
}

.crop-viewport:active {
    cursor: grabbing;
}

.crop-viewport--logo {
    width: min(80vw, 400px);
    aspect-ratio: 1 / 1;
}

.crop-viewport--banner {
    width: min(90vw, 800px);
    aspect-ratio: 4 / 1;
}

.crop-viewport--profile {
    width: min(80vw, 300px);
    aspect-ratio: 2 / 3;
}

.crop-viewport img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    /* pointer events should go to the viewport not the image */
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

/*
    Circular crop: the viewport stays square (the pan/zoom math is unchanged),
    a pseudo element darkens everything outside the circle so the
    user sees exactly what the output will contain.
*/
.crop-viewport--circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.5);
    pointer-events: none;
}

/* -------- Buttons -------- */

.crop-buttons {
    display: flex;
    gap: var(--pill-gap);
    justify-content: flex-end;
    width: 100%;
    flex-wrap: wrap;
}

/* -------- Widget Preview -------- */

/*
    The widget shows the current (or default) image with an edit button and a
    delete button. The native file input and the "clear" checkbox are
    still in the DOM (Django needs them) but visually hidden.
*/

.crop-widget {
    position: relative;
    display: block;
}

    .crop-widget > input[type="file"],
    .crop-widget > .crop-widget-clear {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        opacity: 0;
        overflow: hidden;
        clip-path: inset(50%);
        pointer-events: none;
    }

.crop-preview {
    /* The shorter side of the preview is three times --large-gap; the other
       side follows the crop aspect ratio (set per widget via --crop-ratio). */
    --crop-size: calc(3 * var(--large-gap));
    position: relative;
    aspect-ratio: var(--crop-ratio, 1);
    width: min(100%, calc(var(--crop-size) * max(1, var(--crop-ratio, 1))));
    border-radius: var(--pill-gap);
    overflow:hidden;
    background: var(--gray-bg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
    isolation: isolate;
}

.crop-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/*
    Circle shaped images (club logo): everything outside the inscribed circle
    sits behind a 50 % transparent mask.
*/
.crop-widget--circle .crop-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    --crop-mask-color: rgb(249 249 249 / 0.7);
    --crop-mask-color: color-mix(in srgb, var(--gray-bg) 70%, transparent);
    background: radial-gradient(circle closest-side, transparent calc(100% - 1px), var(--crop-mask-color) 100%);
    pointer-events: none;
}

/* -------- Widget Buttons -------- */

.crop-preview-actions {
    position: absolute;
    right: var(--pill-gap);
    bottom: var(--pill-gap);
    display: flex;
    gap: var(--pill-gap);
    z-index: 1;
}

.crop-btn {
    /* Restated here because Bootstrap's .tooltip sets display:block,
       which would undo the centering from the global button rule */
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-h);
    height: var(--btn-h);
    padding: 0;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--white-bg);
    color: var(--text-color);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .crop-btn:hover {
        background: var(--gray-bg);
    }

    .crop-btn:focus-visible {
        outline: 2px solid var(--primary-color-1);
        outline-offset: 2px;
    }

    .crop-btn:disabled {
        cursor: default;
        opacity: 0.6;
    }

/*
    Tooltips (.tooltip::after in classes_base.css) normally open below and
    centered on the element. Here both buttons' tooltips open above the button
    row and share the same right edge (the trash button's), so "Logo ändern"
    and "Logo löschen" appear in the same spot instead of one sticking out.
    position:static makes .crop-preview-actions the containing block of the
    pseudo element, so right:0 means "right edge of the button row".
*/
.crop-btn.tooltip {
    position: static;
}

.crop-btn.tooltip::after {
    top: auto;
    bottom: calc(100% + 6px);
    left: auto;
    right: 0;
    transform: none;
    color: var(--text-color);   /* don't inherit the red of the trash button */
}

.crop-btn-icon {
    display: block;
    width: calc(var(--btn-h) * 0.42);
    height: calc(var(--btn-h) * 0.42);
    background-color: currentColor;
    -webkit-mask: var(--crop-icon) center / contain no-repeat;
    mask: var(--crop-icon) center / contain no-repeat;
}

/*
    The delete button is parked outside the preview (clipped by overflow:hidden)
    and slides in from the right when the preview is hovered or focused. Its
    negative margin collapses its slot, so the edit button rests in the corner
    and glides left as the trash icon arrives.
*/
.crop-btn--delete {
    color: var(--danger-color);
    margin-right: calc(-1 * (var(--btn-h) + var(--pill-gap)));
    opacity: 0;
    visibility: hidden;
    transform: translateX(var(--btn-h));
    filter: blur(6px);
    transition:
        margin-right 0.35s cubic-bezier(.16, 1, .3, 1),
        transform 0.35s cubic-bezier(.16, 1, .3, 1),
        opacity 0.25s ease,
        filter 0.3s ease,
        visibility 0s linear 0.35s;
}

.crop-preview:hover .crop-btn--delete,
.crop-preview:focus-within .crop-btn--delete {
    margin-right: 0;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    filter: blur(0);
    transition-delay: 0s;
}

/* Nothing to remove -> no delete button at all */
.crop-widget--empty .crop-btn--delete {
    display: none;
}

/* Touch devices cannot hover: keep the delete button visible */
@media (hover: none) {
    .crop-btn--delete {
        margin-right: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crop-btn--delete {
        transform: none;
        filter: none;
        transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    }
}

.crop-widget-error {
    margin-top: var(--medium-gap);
}