/* Devlopen_Labels - product label overlay styles */

.devlopen-labels-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.devlopen-labels-debug {
    outline: 1px dashed rgba(255, 0, 0, 0.5);
}

.devlopen-label {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    background-color: #e02020;
    color: #ffffff;
    border: 1px solid transparent;
    white-space: nowrap;
    box-sizing: border-box;
    pointer-events: none;
}

.devlopen-label__icon {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.devlopen-label__text {
    display: inline-block;
}

/* --- positions --- */
.devlopen-label--pos-top-left     { top: 8px; left: 8px; }
.devlopen-label--pos-top-center   { top: 8px; left: 50%; transform: translateX(-50%); }
.devlopen-label--pos-top-right    { top: 8px; right: 8px; }
.devlopen-label--pos-middle-left  { top: 50%; left: 8px; transform: translateY(-50%); }
.devlopen-label--pos-middle-center{ top: 50%; left: 50%; transform: translate(-50%, -50%); }
.devlopen-label--pos-middle-right { top: 50%; right: 8px; transform: translateY(-50%); }
.devlopen-label--pos-bottom-left  { bottom: 8px; left: 8px; }
.devlopen-label--pos-bottom-center{ bottom: 8px; left: 50%; transform: translateX(-50%); }
.devlopen-label--pos-bottom-right { bottom: 8px; right: 8px; }

/* --- shapes --- */
.devlopen-label--shape-rectangle  { border-radius: 0; }
.devlopen-label--shape-rounded    { border-radius: 4px; }
.devlopen-label--shape-pill       { border-radius: 999px; }
.devlopen-label--shape-circle     {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    text-align: center;
}
.devlopen-label--shape-ribbon-left,
.devlopen-label--shape-ribbon-right {
    border-radius: 2px;
    padding: 4px 14px;
}
.devlopen-label--shape-ribbon-left::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    bottom: 0;
    width: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 6px solid inherit;
}

/* --- animations --- */
@keyframes devlopen-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@keyframes devlopen-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
@keyframes devlopen-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes devlopen-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}
@keyframes devlopen-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.devlopen-label--anim-pulse  { animation: devlopen-pulse 1.4s ease-in-out infinite; }
.devlopen-label--anim-blink  { animation: devlopen-blink 1.2s ease-in-out infinite; }
.devlopen-label--anim-bounce { animation: devlopen-bounce 1s ease-in-out infinite; }
.devlopen-label--anim--shake { animation: devlopen-shake 0.6s ease-in-out infinite; }
.devlopen-label--anim-shake  { animation: devlopen-shake 0.6s ease-in-out infinite; }
.devlopen-label--anim-rotate img { animation: devlopen-rotate 3s linear infinite; }

/* ensure the containers used by Magento image blocks establish positioning context */
.product-image-container,
.product-item-photo,
.product.media {
    position: relative;
}