/* Load More Button Styles - Cyberpunk Style */
.load-more-container {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    padding: 1rem;
}

/* Higher specificity to override events.css */
.load-more-container .load-more-btn {
    /* --- Container Styles (Copied from .reserve-btn) --- */
    width: 100%; /* Or a specific width */
    height: 80px;
    max-width: 300px; /* Example constraint */
    display: inline-flex; /* Use flex/inline-flex for alignment */
    align-items: center;
    justify-content: center;
    padding: 8px 12px; /* Reduced vertical padding for less height, kept horizontal padding */
    border: none;
    background: none; /* Background moved to ::before */
    /*color: var(--background-color); /* Text color */
    font-family: var(--font-title-en);
    color: var(--button-text-color);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative; /* Crucial for positioning pseudo-elements */
    z-index: 1; /* Base stacking context */
    letter-spacing: 2px;
    margin: 10px auto;

    /* Apply the SVG filter to round the corners of ::before */
    filter: url(#round-low);

    /* Allow shadow/filter effects to be visible if they extend */
    overflow: visible;
}

.load-more-container .load-more-btn::before {
    /* --- Shape & Background Pseudo-element (Copied from .reserve-btn) --- */
    content: "";
    position: absolute;
    /* Make it cover the parent's padding box */
    inset: 0;
    z-index: -1; /* Position behind the text */

    /* Moved from .load-more-btn */
    background: var(--color-secondary);
    clip-path: polygon(5% 0%, 100% 0%, 100% 80%, 100% 100%, 0% 100%, 0% 20%);
    transition: background-color 0.2s;
}

/* --- Glitch Effect (Copied from .reserve-btn) --- */
.load-more-container .load-more-btn::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);

    /* Needs data-label="Your Text" on the button element */
    content: attr(data-label);
    display: block; /* Changed to block */
    position: absolute;
    inset: 0; /* Cover the parent area */
    /* Use padding of parent to align text */
    padding: inherit; /* Inherit padding from .load-more-btn */

    /* Glitch styles */
    background: linear-gradient(45deg, transparent 3%, var(--color-secondary-light) 3%, var(--color-secondary-light) 5%, var(--color-secondary) 5%);
    text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px var(--color-secondary-light);
    clip-path: var(--slice-0); /* Initial clip-path */
    pointer-events: none; /* Don't interfere with clicks */
    z-index: 2; /* Above ::before, below actual text if needed, but text is part of ::after here */

    /* Font styles should match the button's text */
    color: transparent; /* Make the text itself transparent, rely on text-shadow */
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    letter-spacing: inherit;
    text-align: center; /* Center text horizontally */
    line-height: normal; /* Reset line-height potentially affected by flex */

    /* Ensure flex alignment from parent doesn't mess up text pos */
    display: flex; /* Match parent's display for alignment */
    align-items: center;
    justify-content: center;

    /* Glitch Animation */
    opacity: 1;
    animation: load-more-glitch 5s steps(3, end) infinite;
}

@keyframes load-more-glitch {
    /* --- ACTIVE GLITCH PHASE (First 1/3 ≈ 0% to 33.3%) --- */
    0% { clip-path: var(--slice-1); transform: translate(-20px, -10px); }
    3.3% { clip-path: var(--slice-3); transform: translate(10px, 10px); }
    6.6% { clip-path: var(--slice-1); transform: translate(-10px, 10px); }
    10% { clip-path: var(--slice-3); transform: translate(0px, 5px); }
    13.3% { clip-path: var(--slice-2); transform: translate(-5px, 0px); }
    16.6% { clip-path: var(--slice-3); transform: translate(5px, 0px); }
    20% { clip-path: var(--slice-4); transform: translate(5px, 10px); }
    23.3% { clip-path: var(--slice-2); transform: translate(-10px, 10px); }
    26.6% { clip-path: var(--slice-5); transform: translate(20px, -10px); }
    30% { clip-path: var(--slice-1); transform: translate(-10px, 0px); }
    33.3% { clip-path: var(--slice-1); transform: translate(0); }

    /* --- PAUSE PHASE (Remaining 2/3 ≈ 33.4% to 100%) --- */
    33.4%, 100% {
        clip-path: var(--slice-0);
        transform: translate(0);
    }
}

/* Update hover to target the ::before element for background change */
.load-more-container .load-more-btn:hover::before {
    background: var(--color-secondary-light);
}

.load-more-container .load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.load-more-container .load-more-btn:disabled::after {
    animation: none; /* Disable glitch animation when disabled */
}

.load-more-loading {
    display: inline-block;
}

.load-more-btn:disabled .load-more-text {
    display: none;
}

.load-more-btn:not(:disabled) .load-more-loading {
    display: none !important;
}