@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

        :root {
            --bg-gradient-1: #0f0f0f;
            --bg-gradient-2: #1a1a1a;
            --accent-color: #3a86ff;
            --accent-color-soft: rgba(0, 0, 0, 0.2);
            --text-primary: #ffffff;
            --text-secondary: rgba(255, 255, 255, 0.7);
            --glow-color: rgba(0, 0, 0, 0);
        }

        html, body {
            -webkit-text-size-adjust: 100%;
        }

        .commentary-box {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            border: 1px solid #e0e0e0;
        }

        .commentary-item p {
            margin: 0;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: 'Arimo', sans-serif;
            user-select: none;
        }

        .timer {
            text-align: center;
            color: #fff;
            height: 100px;
            overflow: hidden;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.6),
                0 0 10px rgba(255, 255, 255, 0.6),
                0 0 20px rgba(255, 255, 255, 0.6),
                0 0 40px #00e5ff,
                0 0 80px #00e5ff,
                0 0 100px #00e5ff;
        }

        .timer--clock {
            display: flex;
            justify-content: center;
            font-size: 5em;
            font-family: 'Inter', sans-serif;
        }

       /* .bg-image {
  background-image: url({{ url('storage/match-images/' . Illuminate\Support\Str::slug("{$match->home_team_name}-vs-{$match->away_team_name}") . '.jpg') }}?t={{ $match->match_time }});

  height: 100%;
  width: 100%;

  background-position: center;
  background-repeat: no-repeat, repeat;
  background-size: cover;
} */

#wowTimer{
    position: absolute;
    z-index: 2;
}

.bg-image, .loading-bg-image {
    background: black;
  position: absolute; /* Make sure the container can position the pseudo-element */
}

.bg-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  z-index: 1; /* Overlay sits above the background */
}

.bg-image img, .loading-bg-image img {
  display: block;
  width: 100%; /* Ensures image takes up the full width of the container */
  height: 100%;
}
        .glow-effect {
            position: absolute;
            width: 100%;
            height: 150%;
            top: -25%;
            left: -25%;
            background: radial-gradient(circle at center, var(--glow-color) 0%, transparent 70%);
            pointer-events: none;
            animation: glow 8s infinite;
        }

        .clock-display-grp{
            display: flex;
        }

        .timer--clock{
           font-size: 3.5rem !important;
        }

        .clock-display-container {
            display: flex;
            height: 100px;
            background: rgba(0, 0, 0, 0.444);
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            padding: 0px 20px;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .background-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            opacity: 0.05;
            overflow: hidden;
        }

        .line {
            position: absolute;
            z-index: 99;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
            animation: moveLine 8s infinite linear;
        }

        .floating-particles {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 999;
        }

        .particle {
            position: absolute;
            z-index: 99;
            width: 2px;
            height: 2px;
            background: var(--accent-color-soft);
            border-radius: 50%;
            animation: float 20s infinite linear;
        }

        @keyframes moveLine {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100vh); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        @keyframes glow {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(10%, 10%) scale(1.1); }
        }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }

        .clock-separator p {
            height: 90px;
            margin: 0 10px;
            display: flex;
            align-items: center;
        }

        .clock-separator {
            height: 100%;
            display: flex;
            align-items: center;
        }

        .num p {
            margin: 0px;
            display: flex;
            align-items: center;
        }

        .number-grp-wrp {
            display: flex;
            flex-direction: column;
            transition: transform 0.5s ease-out;
        }

        .num {
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .reload {
            display: none;
            cursor: pointer;
            font-size: 1.5em;
            color: #333;
            margin-top: 20px;
        }

        @media(max-width: 772px) {
            .num {
                height: 50px;
            }

            .timer {
                height: 50px;
                font-size: 0.5rem;
            }

            .clock-separator p {
                height: 45px;
            }

            .clock-display-container {
                height: 50px;
                padding: 0px 10px;
            }

            .timer--clock{
              font-size: 2rem !important;
            }
        }

        .btn-bet{
            background: #EBF4F1 !important;
            color: #188A5E !important;
            font-size: 1rem;
        }

        .btn-bet:hover{
            background: rgba(19, 20, 20, 0.873)important;
            color: #188A5E !important;
        }
.Onexbet-btn{
     background: #188A5E !important;
     color: white !important;
}

/* Initially hide both elements */
.fade-img, .fade-btn {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Show the image */
.fade-img.show {
    display: block;
    opacity: 1;
}

/* Show the button */
.fade-btn.show {
    display: block;
    opacity: 1;
}

.Onexbet-img{
   width: 100%;
}

@media(max-width: 556px){
    .Onexbet-img{
        width: 100%;
    }
}
        .sticker-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0px 10px;
        }

        .sticker-box {
            display: none;
            position: absolute;
            bottom: 60px;
            left: 10px;
            max-height: 200px;
            overflow-y: auto;
            /* width: 200px; */
            background: #fff;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 100;
            flex-wrap: wrap;
            gap: 5px;
        }

.sticker-img {
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: transform 0.2s;
}

.sticker-img:hover {
    transform: scale(1.1);
}

/* Define rotation animation */
@keyframes vjs-spinner-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Define color change animation */
@keyframes vjs-spinner-fade {
    0% {
        border-top-color: #73859f;
    }
    20% {
        border-top-color: #73859f;
    }
    35% {
        border-top-color: white;
    }
    60% {
        border-top-color: #73859f;
    }
    100% {
        border-top-color: #73859f;
    }
}

/* Spinner container styling */
.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0.85;
    width: 3.2em;
    height: 3.2em;
    visibility: visible;  /* Make sure the spinner is visible */
    border-width: 6px;
    border-style: solid;
    border-color: rgba(43, 51, 63, 0.7);
    border-radius: 50%;
    animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

/* Spinner before and after elements */
.spinner-container::before,
.spinner-container::after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    opacity: 1;
    border-radius: inherit;
    border: inherit;
    border-color: white transparent transparent transparent;
    animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

/* Set the white border-top color for the before pseudo-element */
.spinner-container::before {
    border-top-color: rgb(255, 255, 255);  /* White top border color */
}

/* Set the white border-top color for the after pseudo-element */
.spinner-container::after {
    border-top-color: rgb(255, 255, 255);  /* White top border color */
}



        /* .spinner {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: relative;
            z-index: 2;
            animation: rotate 1s linear infinite;
        }

        .spinner::before {
            content: "";
            box-sizing: border-box;
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 5px solid #ffffff03;
            animation: prixClipFix 2s linear infinite;
        }

        .spinner::after {
            content: "";
            box-sizing: border-box;
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 5px solid;
            border-color: #b4934a transparent transparent transparent;
            animation: prixClipFix 2s linear infinite, rotate 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg) }
            100% { transform: rotate(360deg) }
        }

        @keyframes prixClipFix {
            0% { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0) }
            25% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0) }
            50% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%) }
            75% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%) }
            100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0) }
        } */

        /* Optional: Add a subtle glow effect */
        /* .spinner-container {
    z-index: 2;
            position: relative;
        }

        .spinner-container::after {
            content: "";
            position: absolute;
            inset: -10px;
            background: radial-gradient(circle, rgba(180, 147, 74, 0.2) 0%, transparent 70%);
            filter: blur(10px);
            border-radius: 50%;
        }

        /* Optional: Add a pulsing effect to the container */
        /* .spinner-container {
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        } */