.card-container {
            display: flex;
            flex-wrap: nowrap;
            gap: 1.25rem;
            max-width: 100%;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .card-container::-webkit-scrollbar {
            display: none;
        }
        .card-outer {
            display: flex;
            justify-content: center;
            flex: 0 0 auto;
            scroll-snap-align: start;
        }
        /* Make sure the wrapper can position the dropdown */
.share-menu-wrapper {
    position: relative;
}

/* Base share menu styling */
.share-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 11.5rem;
    background-color: #ffffff;
    border-radius: 0.9rem;
    border: 1px solid #E5E7EB;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
    padding: 4px 0;
    z-index: 40;
    overflow: hidden;

    /* smooth pop effect */
    transform-origin: top right;
    transform: scale(1);
    opacity: 1;
    transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}

/* When Tailwind's .hidden is applied, keep it invisible + non-clickable */
.share-menu.hidden {
    opacity: 0;
    transform: scale(0.97) translateY(-4px);
    pointer-events: none;
}

/* Little arrow / caret above the menu */
.share-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-left: 1px solid #E5E7EB;
    border-top: 1px solid #E5E7EB;
    transform: rotate(45deg);
}

/* Buttons inside the share menu */
.share-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: transparent;
    font-size: 12px;
    line-height: 1.3;
    color: #111827; /* gray-900 */
    padding: 8px 12px;
    cursor: pointer;
}

/* Hover effect for each menu item */
.share-menu button:hover {
    background-color: #F9FAFB; /* gray-50 */
}

/* Optional: subtle divider for the first item group */
.share-menu button + button {
    border-top: 1px solid #F3F4F6; /* gray-100 */
}

/* If you ever add icons inside (e.g., <span class="icon">), space them nicely */
.share-menu button .icon {
    margin-right: 6px;
    font-size: 14px;
    opacity: 0.7;
}

        .card {
            position: relative;
        }
        .share-menu {
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
            border-radius: 0.9rem;
            overflow: hidden;
        }
        .load-more-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 1.75rem auto 0;
            padding: 0.55rem 1.3rem;
            background: #130D60;
            color: #ffffff;
            font-weight: 500;
            font-size: 0.85rem;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            gap: 0.4rem;
            box-shadow: 0 8px 20px rgba(19, 13, 96, 0.25);
            transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        }
        .load-more-btn:hover {
            background: #0f0b4a;
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(19, 13, 96, 0.3);
        }
        .load-more-btn span:first-child {
            font-size: 0.9rem;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
        }
        @media (max-width: 600px) {
            .max-w-7xl {
                max-width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
        }