/**
 * Lottery End Date Orderby — Ended Overlay Styles
 * Version 5.0.8
 */

/* ============================================================
   Base overlay container
   Sits on top of the product card using absolute positioning.
   The parent loop item needs position: relative.
   Elementor Loop Grid items have this by default.
============================================================ */

.led-lottery-ended {
    position: relative;
}

.led-ended-overlay {
    position: absolute;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;

    /* Dark semi-transparent base layer */
    background: rgba(10, 10, 20, 0.62);

    /* Smooth fade-in on page load */
    animation: led-fade-in 0.4s ease forwards;
}

@keyframes led-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ============================================================
   Diagonal repeating "ENDED" text mask
   Creates a tiled diagonal watermark pattern across the entire card
============================================================ */

.led-diagonal-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170%;
    height: 170%;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    align-content: space-around;
    justify-content: space-around;
    gap: 24px 44px;
    transform: translate(-50%, -50%) rotate(-34deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 1;
}

.led-diagonal-mask span {
    display: block;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    white-space: nowrap;

    /* Alternating colours for visual depth */
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.18);
    opacity: 0.95;
}

/* Alternate every other row with a slight colour tint */
.led-diagonal-mask span:nth-child(odd) {
    -webkit-text-stroke: 1.5px rgba(255, 80, 80, 0.28);
}

.led-diagonal-mask span:nth-child(3n) {
    -webkit-text-stroke: 1.5px rgba(255, 160, 40, 0.22);
}

/* Stagger each tile so the words feel spread through the clipped card area. */
.led-diagonal-mask span:nth-child(1) { transform: translate(-18px, -10px); }
.led-diagonal-mask span:nth-child(2) { transform: translate(12px, 16px); }
.led-diagonal-mask span:nth-child(3) { transform: translate(34px, -6px); }
.led-diagonal-mask span:nth-child(4) { transform: translate(22px, 18px); }
.led-diagonal-mask span:nth-child(5) { transform: translate(-8px, -14px); }
.led-diagonal-mask span:nth-child(6) { transform: translate(-30px, 12px); }
.led-diagonal-mask span:nth-child(7) { transform: translate(30px, -12px); }
.led-diagonal-mask span:nth-child(8) { transform: translate(-18px, 10px); }
.led-diagonal-mask span:nth-child(9) { transform: translate(10px, -18px); }


/* ============================================================
   Corner ribbon badge
   Classic angled ribbon in top-right corner
============================================================ */

.led-corner-ribbon {
    position: absolute;
    top: 16px;
    right: -28px;
    width: 120px;
    background: linear-gradient( 135deg, #c0392b, #e74c3c );
    color: #fff;
    text-align: center;
    transform: rotate(45deg);
    transform-origin: center center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    z-index: 20;
    padding: 5px 0;
}

.led-corner-ribbon span {
    display: block;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}


/* ============================================================
   Centre stamp badge — the main visual element
   A large circular/hexagonal stamp in the centre of the card
============================================================ */

.led-ended-center-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
}

.led-ended-stamp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;

    /* Double-ring stamp effect */
    border: 3px solid rgba(231, 76, 60, 0.85);
    border-radius: 50%;
    box-shadow:
        0 0 0 2px rgba(231, 76, 60, 0.3),
        0 0 0 6px rgba(231, 76, 60, 0.12),
        inset 0 0 0 2px rgba(231, 76, 60, 0.3);

    /* Subtle rotation for that stamp authenticity */
    transform: rotate(-12deg);

    /* Background blur behind stamp */
    background: rgba(20, 10, 10, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    transition: transform 0.3s ease;
}

/* Subtle pulse on hover */
.led-lottery-ended:hover .led-ended-stamp {
    transform: rotate(-12deg) scale(1.06);
}

.led-ended-stamp span {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(231, 76, 60, 0.92);
    text-shadow:
        0 0 12px rgba(231, 76, 60, 0.6),
        0 1px 0 rgba(0,0,0,0.5);

    /* Inner second ring via pseudo element */
    position: relative;
    z-index: 1;
}

/* Inner decorative ring */
.led-ended-stamp::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px dashed rgba(231, 76, 60, 0.4);
}

/* Outer glow pulse animation */
.led-ended-stamp::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(231, 76, 60, 0.15);
    animation: led-pulse 2.5s ease-in-out infinite;
}

@keyframes led-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.04); }
}


/* ============================================================
   Style variants
   .led-style-badge    — corner ribbon only (no diagonal stripes)
   .led-style-diagonal — stripes + centre stamp (no ribbon)
   .led-style-both     — everything
============================================================ */

/* Badge only — hide diagonal mask and keep ribbon + stamp */
.led-style-badge .led-diagonal-mask {
    display: none;
}

/* Diagonal only — ribbon is hidden, stripes + stamp show */
.led-style-diagonal .led-corner-ribbon {
    display: none;
}

/* Both — everything shows (default) */


/* ============================================================
   Responsive adjustments
============================================================ */

@media ( max-width: 768px ) {

    .led-ended-stamp {
        width: 80px;
        height: 80px;
    }

    .led-ended-stamp span {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .led-diagonal-mask span {
        font-size: 16px;
        letter-spacing: 4px;
    }

    .led-diagonal-mask {
        width: 190%;
        height: 190%;
        gap: 20px 34px;
    }

    .led-corner-ribbon {
        top: 12px;
        right: -22px;
        width: 90px;
    }

    .led-corner-ribbon span {
        font-size: 9px;
        letter-spacing: 2px;
    }
}


/* ============================================================
   Elementor Loop Grid specific overrides
   Ensure the parent .elementor-loop-item has relative position
   (it does by default but this is a safety net)
============================================================ */

.e-loop-item.led-lottery-ended,
.elementor-loop-item.led-lottery-ended,
.elementor-loop-item .led-lottery-ended,
.elementor-post.led-lottery-ended,
.woocommerce ul.products li.product.led-lottery-ended {
    position: relative;
    overflow: hidden;
}