/* JO Download Image */

/* Applied via JS to whichever existing container the icons attach to
   (e.g. JoomGallery's .jg-image-thumbnail or .joom-image) - only ever
   sets position: relative, and only if that container was position:
   static to begin with. Nothing else about the container is touched. */
.jo-positioned {
    position: relative;
}

.jo-btn-group {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px;
}

.jo-download-image-btn,
.jo-add-image-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--jo-icon-size, 36px);
    height: var(--jo-icon-size, 36px);
    padding: 6px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
    pointer-events: none;
}

.jo-download-image-btn svg,
.jo-add-image-btn svg {
    width: 100%;
    height: 100%;
}

.jo-positioned:hover .jo-download-image-btn,
.jo-positioned:hover .jo-add-image-btn,
.jo-positioned:focus-within .jo-download-image-btn,
.jo-positioned:focus-within .jo-add-image-btn,
.jo-positioned.jo-always-visible .jo-download-image-btn,
.jo-positioned.jo-always-visible .jo-add-image-btn,
.jo-add-image-btn.is-selected {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.jo-download-image-btn:hover,
.jo-add-image-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.jo-download-image-btn.is-loading {
    opacity: 1;
    pointer-events: none;
    animation: jo-download-pulse 0.9s ease-in-out infinite;
}

.jo-add-image-btn.is-selected {
    background: #2e7d32;
}

.jo-add-image-btn.is-selected:hover {
    background: #256428;
}

@keyframes jo-download-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Position variants: anchor the button group to a corner. */
.jo-pos-top-right .jo-btn-group {
    top: 0;
    right: 0;
}

.jo-pos-top-left .jo-btn-group {
    top: 0;
    left: 0;
    flex-direction: row-reverse;
}

.jo-pos-bottom-right .jo-btn-group {
    bottom: 0;
    right: 0;
}

.jo-pos-bottom-left .jo-btn-group {
    bottom: 0;
    left: 0;
    flex-direction: row-reverse;
}

/* "Download ZIP" bar */
.jo-download-zip-bar {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
}

.jo-download-zip-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Full-width fixed variants */
.jo-zip-pos-bottom-fixed {
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
}

.jo-zip-pos-bottom-fixed.is-visible {
    transform: translateY(0);
}

.jo-zip-pos-top-fixed {
    left: 0;
    right: 0;
    top: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transform: translateY(-100%);
}

.jo-zip-pos-top-fixed.is-visible {
    transform: translateY(0);
}

/* Compact floating pill variants, anchored to a corner */
.jo-zip-pos-top-left-floating,
.jo-zip-pos-top-right-floating,
.jo-zip-pos-bottom-left-floating,
.jo-zip-pos-bottom-right-floating {
    max-width: min(92vw, 480px);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transform: scale(0.92);
    transform-origin: center;
}

.jo-zip-pos-top-left-floating.is-visible,
.jo-zip-pos-top-right-floating.is-visible,
.jo-zip-pos-bottom-left-floating.is-visible,
.jo-zip-pos-bottom-right-floating.is-visible {
    transform: scale(1);
}

.jo-zip-pos-top-left-floating {
    top: 20px;
    left: 20px;
}

.jo-zip-pos-top-right-floating {
    top: 20px;
    right: 20px;
}

.jo-zip-pos-bottom-left-floating {
    bottom: 20px;
    left: 20px;
}

.jo-zip-pos-bottom-right-floating {
    bottom: 20px;
    right: 20px;
}

.jo-zip-bar-count {
    font-weight: 600;
}

.jo-zip-bar-count.jo-zip-bar-limit {
    color: #ff6b6b;
}

.jo-zip-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jo-zip-bar-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: #2e7d32;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.jo-zip-bar-download svg {
    width: 18px;
    height: 18px;
}

.jo-zip-bar-download:hover {
    background: #256428;
}

.jo-zip-bar-download:disabled {
    opacity: 0.6;
    cursor: default;
}

.jo-zip-bar-clear {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.jo-zip-bar-clear:hover {
    background: rgba(255, 255, 255, 0.12);
}

.jo-download-zip-bar.is-busy .jo-zip-bar-clear {
    opacity: 0.5;
    pointer-events: none;
}