/**
 * Baprile Product Badges — Frontend CSS
 * Zero theme element overrides. All rules scoped to .bap-product-badges-*
 */

/* Wrapper is rendered by PHP then moved by JS. Keep it hidden until mounted
   to prevent FOUC and layout shifts. */
.bap-product-badges-wrapper {
    display: none;
}

/* Single-product wrapper stays where PHP puts it; JS simply reveals it. */
.bap-product-badges-wrapper.bap-product-badges-wrapper--single.bap-badge-mounted {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
}

/* --- Corner containers (injected by JS) ---
   Small, absolutely positioned, pointer-events disabled so they never
   block clicks on the product image. */
.bap-product-badges-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    z-index: 15;
}

.bap-product-badges-corner--top-left {
    top: 8px;
    left: 8px;
    align-items: flex-start;
}

.bap-product-badges-corner--top-right {
    top: 8px;
    right: 8px;
    align-items: flex-end;
}

.bap-product-badges-corner--bottom-left {
    bottom: 8px;
    left: 8px;
    align-items: flex-start;
    flex-direction: column-reverse;
}

.bap-product-badges-corner--bottom-right {
    bottom: 8px;
    right: 8px;
    align-items: flex-end;
    flex-direction: column-reverse;
}

/* --- Individual badge --- */
.bap-product-badges-badge {
    display: inline-block;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    margin: 0;
}

/* Corner-specific slide variables for the slideIn animation */
.bap-product-badges-badge--top-left { --bap-slide-x: -20px; --bap-slide-y: -20px; }
.bap-product-badges-badge--top-right { --bap-slide-x: 20px; --bap-slide-y: -20px; }
.bap-product-badges-badge--bottom-left { --bap-slide-x: -20px; --bap-slide-y: 20px; }
.bap-product-badges-badge--bottom-right { --bap-slide-x: 20px; --bap-slide-y: 20px; }

/* ---------- Animations ---------- */
.bap-badge-anim-fadeIn { animation: bap-anim-fadeIn 0.5s ease both; }
.bap-badge-anim-slideIn { animation: bap-anim-slideIn 0.5s ease both; }
.bap-badge-anim-bounceIn { animation: bap-anim-bounceIn 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.bap-badge-anim-zoomIn { animation: bap-anim-zoomIn 0.5s ease both; }
.bap-badge-anim-flipInX { animation: bap-anim-flipInX 0.6s ease both; }
.bap-badge-anim-lightSpeedIn { animation: bap-anim-lightSpeedIn 0.6s ease-out both; }
.bap-badge-anim-rubberBand { animation: bap-anim-rubberBand 0.8s ease both; }
.bap-badge-anim-tada { animation: bap-anim-tada 0.8s ease both; }
.bap-badge-anim-shake { animation: bap-anim-shake 0.6s ease both; }

/* Keyframes */
@keyframes bap-anim-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bap-anim-slideIn {
    from { opacity: 0; transform: translate(var(--bap-slide-x), var(--bap-slide-y)); }
    to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes bap-anim-bounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    20%  { transform: scale(1.05); }
    40%  { transform: scale(0.9); }
    60%  { opacity: 1; transform: scale(1.03); }
    80%  { transform: scale(0.97); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes bap-anim-zoomIn {
    from { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes bap-anim-flipInX {
    from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    40%  { transform: perspective(400px) rotateX(-20deg); }
    60%  { opacity: 1; transform: perspective(400px) rotateX(10deg); }
    80%  { transform: perspective(400px) rotateX(-5deg); }
    to   { opacity: 1; transform: perspective(400px) rotateX(0); }
}

@keyframes bap-anim-lightSpeedIn {
    from { opacity: 0; transform: translateX(-100%) skewX(-30deg); }
    60%  { opacity: 1; transform: translateX(20%) skewX(20deg); }
    80%  { transform: translateX(0) skewX(-10deg); }
    to   { opacity: 1; transform: translateX(0) skewX(0); }
}

@keyframes bap-anim-rubberBand {
    0%   { opacity: 1; transform: scale(1); }
    30%  { transform: scale(1.25, 0.75); }
    40%  { transform: scale(0.75, 1.25); }
    50%  { transform: scale(1.15, 0.85); }
    65%  { transform: scale(0.95, 1.05); }
    75%  { transform: scale(1.05, 0.95); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes bap-anim-tada {
    0%   { opacity: 1; transform: scale(1); }
    10%  { transform: scale(0.9) rotate(-3deg); }
    20%  { transform: scale(0.9) rotate(-3deg); }
    30%  { transform: scale(1.1) rotate(3deg); }
    50%  { transform: scale(1.1) rotate(3deg); }
    70%  { transform: scale(1.1) rotate(-3deg); }
    90%  { transform: scale(1.1) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes bap-anim-shake {
    0%, 100% { opacity: 1; transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ---------- Idle / Resting Animations ---------- */
.bap-badge-idle-breathe     { animation: bap-idle-breathe     2.5s ease-in-out infinite; }
.bap-badge-idle-pulseGlow   { animation: bap-idle-pulseGlow   2s   ease-in-out infinite; }
.bap-badge-idle-colorShift  { animation: bap-idle-colorShift  5s   linear infinite; }
.bap-badge-idle-flash       { animation: bap-idle-flash       2.5s ease-in-out infinite; }
.bap-badge-idle-wobble      { animation: bap-idle-wobble      2s   ease-in-out infinite; }
.bap-badge-idle-swing       { animation: bap-idle-swing       2.5s ease-in-out infinite; }
.bap-badge-idle-jello       { animation: bap-idle-jello       2.5s ease infinite; }
.bap-badge-idle-heartbeat   { animation: bap-idle-heartbeat   1.5s ease-in-out infinite; }
.bap-badge-idle-textGlow    { animation: bap-idle-textGlow    2s   ease-in-out infinite; }
.bap-badge-idle-skew        { animation: bap-idle-skew        3s   ease-in-out infinite; }

@keyframes bap-idle-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

@keyframes bap-idle-pulseGlow {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
    50%      { box-shadow: 0 4px 20px rgba(0,0,0,0.35); }
}

@keyframes bap-idle-colorShift {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes bap-idle-flash {
    0%, 100%, 50% { opacity: 1; }
    25%, 75%      { opacity: 0.5; }
}

@keyframes bap-idle-wobble {
    0%, 100% { transform: rotate(0deg); }
    15%      { transform: rotate(-5deg); }
    30%      { transform: rotate(3deg); }
    45%      { transform: rotate(-3deg); }
    60%      { transform: rotate(2deg); }
    75%      { transform: rotate(-1deg); }
}

@keyframes bap-idle-swing {
    0%, 100% { transform: rotate(0deg); }
    20%      { transform: rotate(8deg); }
    40%      { transform: rotate(-6deg); }
    60%      { transform: rotate(4deg); }
    80%      { transform: rotate(-2deg); }
}

@keyframes bap-idle-jello {
    0%, 100% { transform: scale(1, 1); }
    30%      { transform: scale(1.15, 0.85); }
    40%      { transform: scale(0.85, 1.15); }
    50%      { transform: scale(1.05, 0.95); }
    65%      { transform: scale(0.95, 1.05); }
    75%      { transform: scale(1.02, 0.98); }
}

@keyframes bap-idle-heartbeat {
    0%, 100% { transform: scale(1); }
    15%      { transform: scale(1.15); }
    30%      { transform: scale(1); }
    45%      { transform: scale(1.12); }
    60%      { transform: scale(1); }
}

@keyframes bap-idle-textGlow {
    0%, 100% { text-shadow: none; }
    50%      { text-shadow: 0 0 6px currentColor, 0 0 12px currentColor; }
}

@keyframes bap-idle-skew {
    0%, 100% { transform: skewX(0deg); }
    25%      { transform: skewX(4deg); }
    75%      { transform: skewX(-4deg); }
}

/* --- Mobile: scale corner containers 15 % smaller --- */
@media (max-width: 767px) {
    .bap-product-badges-corner {
        gap: 4px;
        transform: scale(0.85);
    }

    .bap-product-badges-corner--top-left     { transform-origin: top left; }
    .bap-product-badges-corner--top-right    { transform-origin: top right; }
    .bap-product-badges-corner--bottom-left  { transform-origin: bottom left; }
    .bap-product-badges-corner--bottom-right { transform-origin: bottom right; }
}

/* --- Minimog overrides --- */
body.has-bap-badge .product-badges,
body.has-bap-badge .badge {
    display: none !important;
}