/* Central image-management presentation shared by support, products and native upload cards. */
:root {
    --portal-image-card-width:160px;
    --portal-image-card-height:200px;
}

/* Shared upload tile: support attachments, product images and shipping images. */
.support-upload-pick,
button.dt-button.support-upload-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--portal-image-card-width);
    min-width: 0;
    max-width: 100%;
    height: var(--portal-image-card-height);
    min-height: var(--portal-image-card-height);
    padding: 14px;
    box-sizing: border-box;
    border-radius: 18px;
    border: 1px dashed #9db4c8;
    border-style:dashed !important;
    background: #edf4fa;
    color: #17364f;
    cursor: pointer;
    justify-self: start;
    align-self: start;
    order: 999;
}

.support-upload-pick > span {
    font-size: 2.6rem;
    line-height: 1;
    color: #0f6798;
}

.support-upload-pick small {
    display: block;
    margin-top: 8px;
    color: #5f7285;
    font-size: 0.92rem;
}

/* Native Buttons keep the upload tile's visible label and support-style plus icon. */
button.dt-button.support-upload-pick::before,
button.dt-button.support-upload-pick:has(> span:not(:empty))::before {
    content:"+";
    font-family:inherit;
    font-weight:700;
    font-size:2.6rem;
    line-height:1;
    color:#0f6798;
    margin:0;
}
button.dt-button.support-upload-pick > span {
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip-path:none;
    display:block;
    margin-top:8px;
    color:#5f7285;
    font-size:0.92rem;
    line-height:normal;
}

/* Filled cards and the upload action share the same centrally defined footprint. */
.product-image-card,
.product-image-add-row .dt-buttons,
.portal-image-upload-card { width:var(--portal-image-card-width); max-width:100%; height:var(--portal-image-card-height); box-sizing:border-box; }
.product-image-card .arqiv-gr-card-preview { position: relative; width: 100%; height: 100%; box-sizing:border-box; overflow: hidden; border-radius: 8px; border: 1px solid var(--line, #ced4da); background: var(--bg, #f5f7fa); }
.product-image-card .arqiv-gr-card-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; user-select: none; pointer-events: none; }
.product-image-card.is-primary .arqiv-gr-card-preview { box-shadow: 0 0 0 2px goldenrod; }
.product-image-card .arqiv-gr-order-badge { position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent, #17a1ae); color: #000; font-size: 12px; font-weight: 700; pointer-events: none; }
.product-image-card .arqiv-gr-image-view-badge { position: absolute; bottom: 8px; left: 8px; max-width: 100px; padding: 4px 6px; border-radius: 4px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; pointer-events: none; }
.product-image-card-actions { position: absolute; bottom: 8px; right: 8px; }
.product-image-card-actions .dt-buttons { display: flex; flex-direction: column; gap: 8px; }
.product-image-card-actions button.dt-button { width: 38px; min-width: 38px; height: 38px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.product-image-card-actions button.dt-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Hidden accessible labels must not trigger the shared spacing for visible button text. */
.product-image-card-actions button.dt-button::before,
.product-image-card-actions button.dt-button:has(> span:not(:empty))::before { margin: 0; line-height: 1; }
.product-image-card-actions .dt-button-view::before { content: "\f00e"; }
.product-image-card-actions .dt-button-refresh::before { content: "\f2f9"; }
.product-image-add-row .dt-buttons { display: flex; }

/* Single-image fields use the native Editor upload lifecycle with the same gallery card surface. */
.portal-image-upload-field .editor_upload { display:none; }
.portal-image-upload-field .product-image-card-actions .dt-button-edit::before { content:"\f013"; }
.portal-image-upload-field .portal-image-upload-card[aria-busy=true] { opacity:.6; pointer-events:none; }