/* General Body and HTML Styling */
        html {
            overflow-y: scroll; /* Always show scrollbar to prevent layout jump */
        }

        body {
            margin: 0;
            background: linear-gradient(135deg, #7f00ff, #e100ff);
            font-family: 'Segoe UI', sans-serif;
            color: #fff;
        }

        /* Header and Navbar Styling */
        header {
            background-color: rgba(0, 0, 0, 0.9); /* Darker background for header */
            padding: 10px 0;
        }

        .navbar {
            justify-content: space-between;
        }

        .navbar-brand {
            color: #fff !important;
            font-weight: bold;
            font-size: 22px; /* Adjusted font size */
        }

        /* Underline effect for nav links */
        .nav-link.underline {
            position: relative;
            display: inline-block;
        }

        .nav-link.underline::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff);
            background-size: 200%;
            background-position: 0%;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
            filter: blur(0.5px);
            box-shadow: 0 0 6px #ff00ff;
            z-index: 1;
        }

        .nav-link.underline:hover::after {
            transform: scaleX(1);
            animation: animateUnderline 3s linear infinite;
        }

        @keyframes animateUnderline {
            0% {
                background-position: 0%;
            }
            100% {
                background-position: 200%;
            }
        }

        .nav-link {
            color: #fff !important;
            font-weight: 600;
            font-size: 18px;
            letter-spacing: 0.5px;
            transition: 0.3s;
            white-space: nowrap;
        }

        .navbar-collapse {
            justify-content: center !important;
        }

        /* Responsive Navbar adjustments */
        @media (max-width: 767px) {
            .navbar {
                flex-wrap: wrap;
                justify-content: space-between !important;
                align-items: center;
                text-align: center;
            }

            .navbar-brand {
                flex: 1 0 100%;
                text-align: center;
                margin-bottom: 10px;
            }

            .navbar-toggler {
                position: absolute;
                right: 20px;
                top: 15px;
            }

            .navbar-nav {
                flex-direction: column;
                align-items: center;
                gap: 10px;
                background: #000;
                width: 100%;
                padding: 10px 0;
            }

            .nav-link {
                display: block;
                text-align: center;
                font-size: 18px;
            }

            .header-buttons {
                flex-direction: column;
                align-items: center;
                margin-top: 15px;
                gap: 10px;
            }

            .action-btn {
                display: block;
                width: 80%;
                margin: 0 auto;
            }
        }

        .cta-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
        }

        @media (max-width: 767px) {
            .cta-buttons {
                flex-direction: column !important;
                align-items: center;
            }

            .cta-buttons .super-button {
                width: 90%;
                max-width: 280px;
                text-align: center;
            }
        }

        .header-buttons {
            display: flex;
            gap: 10px;
        }

        .header-buttons .btn {
            font-weight: 500;
            border-radius: 5px;
            padding: 5px 15px;
        }

        /* Hero Video */
        .hero-video {
            width: 100%;
            max-height: 700px;
            object-fit: cover;
        }

        /* Section Styling */
        section {
            padding: 60px 20px;
            text-align: center;
            min-height: 300px; /* Fix sudden layout jump on animation */
        }

        /* Testimonial Card */
        .testimonial-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            margin: 10px;
        }

        /* Footer Styling */
        footer {
            background-color: rgba(0, 0, 0, 0.95);
            padding: 20px 0;
            position: relative;
            z-index: 1;
            margin-top: 40px;
        }

        footer .footer-links a {
            margin: 5px 10px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
        }

        footer .footer-links a:hover {
            text-decoration: underline;
        }

        /* Form Styling */
        form input,
        form textarea {
            background-color: #fff !important;
            color: #000 !important;
        }

        .form-label {
            text-align: left;
            width: 100%;
        }

        /* Flag Carousel */
        .flag-carousel-container {
            overflow: hidden;
            white-space: nowrap;
            padding: 20px 0;
        }

        .flag-carousel-track {
            display: flex;
            width: max-content;
            animation: scrollFlags 25s linear infinite;
        }

        .flag-item {
            display: inline-block;
            text-align: center;
            margin: 0 10px;
            width: 90px;
        }

        .flag-item img {
            width: 80px;
            height: auto;
            border-radius: 4px;
            box-shadow: 0 0 5px #00000033;
        }

        .flag-name {
            font-size: 14px;
            margin-top: 5px;
            color: #fff;
        }

        @keyframes scrollFlags {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

    

        /* Stylish Glass Navbar */
        .glass-navbar {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }

        .navbar-brand {
            font-size: 22px;
            font-weight: bold;
            color: #fff;
            letter-spacing: 1px;
            transition: 0.3s ease;
        }

        .navbar-brand:hover {
            color: #ffccff;
        }

        .nav-link:hover {
            color: #ffd6ff !important;
            transform: scale(1.05);
        }

        .action-btn {
            border-radius: 6px;
            font-weight: 600;
            transition: all 0.3s ease-in-out;
        }

        .action-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
        }

        .navbar-toggler {
            border: none;
            outline: none;
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }

        /* Split-style modal for Check Lottery */
        .split-modal .modal-dialog {
            max-width: 800px;
        }

        .split-modal .modal-content {
            display: flex;
            flex-direction: row;
            overflow: hidden;
            border-radius: 12px;
            padding: 0;
            background-color: #111;
        }

        .split-modal .modal-image {
            width: 50%;
            background-color: #111;
            background-image: url('images/modal-left.jpg'); /* Ensure this path is correct */
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .split-modal .modal-form {
            width: 50%;
            padding: 40px 30px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .split-modal .modal-form h5 {
            font-size: 24px;
            margin-bottom: 20px;
            font-weight: bold;
            color: #fff;
        }

        .split-modal .form-control {
            background: transparent;
            border: 1px solid #888;
            color: #fff;
            margin-bottom: 15px;
            border-radius: 4px;
        }

        .split-modal .form-control::placeholder {
            color: #aaa;
        }

        .split-modal .form-control:focus {
            background-color: #000;
            border-color: #00ff99;
            box-shadow: none;
        }

        .split-modal .btn-submit {
            background-color: #00cc66;
            border: none;
            color: white;
            font-weight: bold;
            padding: 10px;
            border-radius: 6px;
            transition: 0.3s ease;
        }

        .split-modal .btn-submit:hover {
            background-color: #00b359;
        }

        .modal-form input.form-control {
            background-color: #fff;
            color: #000;
            border: none;
            padding: 10px;
            border-radius: 6px;
        }

        .modal-form .btn-success {
            background-color: #00c853;
            border: none;
            font-weight: bold;
        }

        .modal-form .btn-success:hover {
            background-color: #00b44b;
        }

        .modal-content {
            max-width: 700px;
            margin: auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .split-modal .modal-heading {
            margin-top: 10px;
            text-align: center;
            font-size: 26px;
        }

        /* Super Button Styling */
        .super-button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 14px 28px;
            background: linear-gradient(145deg, #0f0f0f, #1c1c1c);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 100px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.5px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.4s ease-in-out;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            z-index: 1;
        }

        .super-button::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff);
            animation: rotate 4s linear infinite;
            z-index: -2;
        }

        .super-button::after {
            content: "";
            position: absolute;
            inset: 2px;
            background: #0a0a0a;
            border-radius: inherit;
            z-index: -1;
        }

        .super-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
        }

        .super-button:hover .arrow {
            transform: translateX(6px);
        }

        .arrow {
            width: 22px;
            height: 22px;
            transition: transform 0.3s ease-in-out;
            color: #00ffff;
        }

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

        @media (max-width: 767px) {
            .navbar-nav {
                background: #000;
                padding: 10px;
                text-align: center;
            }

            .navbar-nav .nav-link {
                display: block;
                padding: 10px 0;
            }

            .action-btn {
                display: block;
                margin: 10px auto;
            }
        }

        .super-button span {
            white-space: nowrap;
        }

        /* Header Buttons Specific Styling */
        .header-buttons {
            display: flex;
            flex-direction: row;
            gap: 10px; /* Reduced gap */
            align-items: center;
            justify-content: flex-end; /* Keep them to the right */
            margin-top: -10px; /* Added to move buttons slightly up */
        }

        .header-buttons .super-button {
            padding: 8px 16px; /* Significantly reduced padding for header buttons */
            font-size: 14px; /* Slightly smaller font size */
            min-width: unset; /* Remove minimum width constraint */
            max-width: 150px; /* Set a maximum width if needed, adjust as per visual */
            gap: 8px; /* Smaller gap for icon and text */
        }

        @media (max-width: 767px) {
            .header-buttons {
                flex-direction: column; /* Stack them on very small screens */
                align-items: center;
                justify-content: center;
                margin-top: 10px;
                width: 100%; /* Take full width on small screens */
            }

            .header-buttons .super-button {
                width: 80%; /* Make buttons take more width in column layout */
                max-width: 200px; /* Constrain max width for stacked buttons */
                padding: 10px 20px; /* Slightly more padding when stacked */
                font-size: 16px; /* Restore original font size when stacked */
            }
        }

        /* WhatsApp Widget */
        .whatsapp-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 280px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            font-family: 'Segoe UI', sans-serif;
            z-index: 9999;
        }

        .chat-header {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #25D366;
            color: white;
            padding: 12px;
            cursor: pointer;
        }

        .chat-header img {
            width: 36px;
            height: 36px;
        }

        .chat-body {
            padding: 16px;
            background: #f9f9f9;
            display: none;
        }

        .start-chat {
            display: inline-block;
            margin-top: 10px;
            background: #25D366;
            color: #fff;
            text-decoration: none;
            padding: 10px 16px;
            border-radius: 25px;
            font-weight: bold;
            box-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
        }

        /* Choose Card (Why Choose Us) Styling */
        .choose-card {
            position: relative;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 25px 20px;
            overflow: hidden;
            z-index: 1;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
            transition: all 0.4s ease;
        }

        .choose-card::before {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            z-index: -1;
            background: linear-gradient(135deg, #00ffff, #ff00ff, #00ffff);
            background-size: 400% 400%;
            border-radius: 20px;
            animation: gradientMove 6s linear infinite;
            filter: blur(6px); /* glow effect */
        }
        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .icon-wrap {
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
        }

        .choose-icon {
            width: 60px;
            height: 60px;
            transition: transform 0.4s ease;
            animation: iconPop 1s ease-in-out infinite alternate;
        }

        @keyframes iconPop {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
        }

        .choose-card h5 {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 10px;
        }

        .choose-card p {
            color: #ddd;
            font-size: 15px;
            line-height: 1.5;
        }

        /* Hover Glow */
        .choose-card:hover .choose-icon {
            transform: scale(1.2);
        }

        .choose-card:hover .card-content {
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }

        /* Responsive Choose Card */
        @media (max-width: 768px) {
            .choose-card {
                width: 100%;
                margin-left: 5px;
                margin-right: 5px;
            }

            .choose-icon {
                width: 50px;
                height: 50px;
            }
        }

        @media (min-width: 992px) {
            .choose-card {
                padding-left: 12px;
                padding-right: 12px;
            }
        }

        /* Stats Box Styling */
        .stats-box {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            box-shadow: 0 0 12px rgba(0,255,255,0.1);
            transition: transform 0.3s ease;
            color: #fff;
        }
        .stats-box:hover {
            transform: translateY(-5px);
        }

        /* Desktop Navbar Fixes */
        @media (min-width: 768px) {
            .navbar-nav {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 16px;
            }

            .nav-item {
                display: inline-block;
            }

            .nav-link {
                white-space: nowrap;
                display: inline-block;
                font-size: 18px;
            }
        }

        /* Slot Counter Styling - Crucial for Animation */
.slot-counter {
    display: flex;
    gap: 4px; /* Space between digits */
    font-size: 2.2rem; /* Size of the digits */
    font-weight: bold;
    line-height: 1; /* Essential for correct height calculation */
    font-family: 'Courier New', monospace; /* Monospaced font for alignment */
    justify-content: center; /* Center the digits horizontally */
}

/* Individual digit column */
.slot-digit-wrapper {
    width: 1.2ch; /* Width of each digit column */
    height: 2.2rem; /* Fixed height for the wrapper, matches font-size */
    overflow: hidden; /* Hide overflowing parts of the scrolling strip */
    position: relative; /* For absolute positioning of the inner strip */
    background: transparent;
}

/* Scrolling inner strip containing 0-9 digits */
.slot-digit-inner {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* Smooth scroll */
    will-change: transform; /* Hint to browser for better performance */
}

/* Individual digit styling with animated gradient */
.slot-digit-inner div {
    height: 2.2rem; /* Each digit's height, matches wrapper */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Crucial for vertical alignment */

    /* ✨ Gradient text animation */
    background: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradientMove 3s linear infinite;
}

/* 🔁 Gradient animation keyframes */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-icon {
  background: linear-gradient(45deg, #00ffe7, #ff00c3);
  background-clip: text;           /* <-- standard */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowPulse 2s infinite alternate;
}

@keyframes glowPulse {
  from { transform: scale(1); filter: drop-shadow(0 0 5px #fff); }
  to { transform: scale(1.05); filter: drop-shadow(0 0 10px #ff00f7); }
}

.text-gradient {
  background: linear-gradient(45deg, #00fff0, #ff00c8);
  background-clip: text;           /* <-- standard */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.testimonial-img img {
  box-shadow: 0 0 10px #00e0ff, 0 0 20px #ff00d4;
  transition: transform 0.4s ease;
}

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


.footer-glass {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.footer-link {
  font-weight: 500;
  position: relative;
  text-decoration: none;
  color: white;
  transition: color 0.3s;
}

.footer-link:hover {
  color: #00fff7;
}

/* Gradient underline animation (like your nav menu) */
.footer-link.underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff00d4, #00fff7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.footer-link.underline:hover::after {
  transform: scaleX(1);
}

.text-gradient {
  background: linear-gradient(45deg, #00fff0, #ff00c8);
  background-clip: text;           /* <-- standard */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.black-heading {
  color: #000 !important;
}

/* Moving black-and-white gradient animation */
.card-gradient-animated {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #000, #fff, #000);
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
  transition: transform 0.3s ease;
}

.card-gradient-animated:hover {
  transform: scale(1.03);
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Make inner content readable */
.card-gradient-animated .card-body,
.card-gradient-animated img {
  position: relative;
  z-index: 2;
}
.card-gradient-animated::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65); /* Dark overlay */
  z-index: 1;
}

.star-rating {
  margin-top: 8px;
  color: #FFD700;
  animation: glowStars 1.5s ease-in-out infinite alternate;
}

.star-rating {
  font-size: 1.1rem;
  color: gold;
  text-shadow: 0 0 6px #ff0;
}

@keyframes glowStars {
  0% {
    text-shadow: 0 0 3px #FFD700, 0 0 6px #FFC107;
  }
  100% {
    text-shadow: 0 0 6px #FFD700, 0 0 12px #FFC107;
  }
}

/* Winner Map Tooltip */
.jvectormap-tip {
  max-width: 240px;
  font-size: 14px;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

#loaderOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.85);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Bouncing Queue */
.dot-loader {
  display: flex;
  gap: 16px;
  position: relative;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  animation: jumpToFront 2s infinite ease-in-out;
  animation-delay: calc(var(--i) * 0.2s);
  position: relative;
}

.dot:nth-child(1) { background-color: #f44336; } /* Red */
.dot:nth-child(2) { background-color: #ff9800; } /* Orange */
.dot:nth-child(3) { background-color: #ffeb3b; } /* Yellow */
.dot:nth-child(4) { background-color: #4caf50; } /* Green */
.dot:nth-child(5) { background-color: #2196f3; } /* Blue */

@keyframes jumpToFront {
  0%   { transform: translateY(0) translateX(0) scale(1); z-index: 0; }
  25%  { transform: translateY(-20px) translateX(0) scale(1.1); z-index: 1; }
  50%  { transform: translateY(0) translateX(-60px) scale(0.95); z-index: 1; }
  75%  { transform: translateY(-12px) translateX(-30px); }
  100% { transform: translateY(0) translateX(0); }
}

.loader-text {
  color: white;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}
.winning-amount {
  font-family: 'Noto Sans', 'Segoe UI Symbol', 'Arial Unicode MS', 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #2e7d32;
}

#verifyModal .golden-text {
  font-size: 1.5rem;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-align: center;
  text-transform: none;  /* ✅ remove uppercase */
  margin-top: 10px;
  margin-bottom: 15px;
}
.golden-text {
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffc107;
  margin-bottom: 20px;
}



@media (max-width: 768px) {
  #verifyModal .golden-text {
    font-size: 1.5rem;
  }
}

body.modal-open {
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* ===== Phone + ISD layout ===== */
.phone-wrap .isd-select{ max-width:120px; min-width:110px; }
.phone-wrap .phone-input{ flex:1; }

/* ===== OTP boxes ===== */
.cl-otp-box{
  width:44px; height:50px; text-align:center; font-size:22px;
  border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:#0e0e0e; color:#fff; outline:none;
  transition:border-color .2s, transform .2s;
}
.cl-otp-box:focus{ border-color:#00ffff; transform:translateY(-1px); }
@media (max-width:480px){ .cl-otp-box{ width:40px; height:46px; } }

/* ===== Flag-only country picker (verify modal) ===== */
.phone-wrap {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.isd-select { display: none !important; } /* keep hidden; JS uses its value */

.flag-btn {
  width: 56px;
  height: 44px;
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.flag-btn:focus-visible { outline: 2px solid #6ea8fe; outline-offset: 2px; }
.flag-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.flag-btn:active { transform: scale(.98); }

.flag-btn .fi { font-size: 22px; line-height: 1; }

.phone-input {
  height: 44px;
  border-radius: .6rem;
}

/* (Optional) nicer OTP boxes if not already styled) */
#clOtpInputs .cl-otp-box {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 22px;
  border-radius: .8rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
}
#clOtpInputs .cl-otp-box:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139,92,246,.25);
  outline: none;
}
/* OTP row हमेशा एक ही line में रहे */
#clOtpInputs{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: nowrap !important;   /* force single row */
}

/* fixed width ताकि shrink ना हो */
#clOtpInputs .cl-otp-box{
  width: 48px;
  height: 56px;
  flex: 0 0 48px;                 /* don't shrink/grow */
}

/* छोटे स्क्रीन पर थोड़ा छोटा कर दो */
@media (max-width: 420px){
  #clOtpInputs .cl-otp-box{
    width: 42px;
    height: 50px;
    flex: 0 0 42px;
  }
}

/* बहुत ही छोटी width पर horizontal scroll allow (optional safety) */
@media (max-width: 330px){
  #clOtpInputs{ overflow-x:auto; }
}
/* Strict "Lottery Not Found" modal */
.hard-not-found-modal {
  background: #121212;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 18px 16px;
}
.hard-not-found-modal .modal-heading {
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 8px;
}
.hard-not-found-modal .modal-text {
  color: #ddd;
  margin: 0 10px 4px;
}

/* ================= OTP Actions — clean + side-by-side ================= */

/* Base CodePen button (keep it lean for two-column fit) */
.codepen-button{
  position: relative;
  display: flex;                 /* so inner span can flex */
  align-items: stretch;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  padding: 2px;                  /* thin gradient ring */
  background: transparent;
  border: 0;
  line-height: normal;
  margin: 0;                     /* no external margins */
  box-sizing: border-box;        /* sizing is predictable */
}

/* animated gradient ring */
.codepen-button::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
  background-size: 300% 100%;
  transition: transform .5s ease;
  z-index: 0;
}
.codepen-button:hover::before{ transform: translateX(-20%); }

/* inner panel */
.codepen-button > span{
  position: relative;
  z-index: 1;
  display:flex; align-items:center; justify-content:center;
  padding: .55rem .9rem;         /* compact so two fit */
  background:#000;
  border-radius: 8px;
  font-size:.95rem;
  white-space:nowrap;
  width:100%;
}

/* disabled */
.codepen-button.is-disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* ====== OTP actions container ====== */
.otp-actions{
  display:flex;
  gap:12px;
  margin-top:10px;
}

/* two-column fit */
.otp-actions .codepen-button{
  flex:1 1 0;        /* equal columns */
  min-width:0;       /* prevent overflow */
}

/* tiny screens: stack nicely */
@media (max-width: 420px){
  .otp-actions{ flex-wrap:wrap; }
  .otp-actions .codepen-button{ flex:1 1 100%; }
}

/* (Optional) Variants if you need subtle difference */
.codepen-button[data-variant="ghost"] > span{
  background: rgba(18,18,18,.85);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* ==== CheckLottery — Stylish Not-Found / Processing Modals ==== */
.cl-modal .modal-content{
  background: rgba(14,14,17,.85);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.35);
  position: relative;
}
.cl-modal .modal-content::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:22px;
  background: conic-gradient(from 0deg, #00ffff, #ff00ff, #7f00ff, #00ffff);
  filter: blur(8px);
  opacity:.45;
  z-index:0;
}
.cl-modal .modal-body{ position:relative; z-index:1; }

.cl-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.25);
  font-weight:700; letter-spacing:.2px;
}
.cl-badge .dot{
  width:10px;height:10px;border-radius:50%;
  background:#ff4d6d; box-shadow:0 0 14px #ff4d6d;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(.9)} 50%{transform:scale(1.15)} }

.cl-title{
  font-family: "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight:800; margin:14px 0 8px;
  background: linear-gradient(90deg,#ff85fb,#00fff0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cl-desc{ color:#d8d8d8; opacity:.9; }

.cl-strip{
  margin:18px 0 6px; height:10px; border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  position:relative;
}
.cl-strip::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer{ to{ transform: translateX(100%); } }

.cl-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.cl-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg,#0f0f0f,#1b1b1b);
  color:#fff; text-decoration:none; transition:.25s;
}
.cl-btn:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.cl-btn--ghost{ background: transparent; }
.cl-note{ font-size:12px; color:#b9b9b9; }

@media (max-width: 480px){
  .cl-actions{ flex-direction:column; }
  .cl-btn{ width:100%; justify-content:center; }
}
/* Force center alignment for modal action button text */
#lotteryNotFoundModal .super-button,
#notFoundModal .super-button {
  justify-content: center !important; /* center text horizontally */
  gap: 0 !important;                  /* remove extra spacing */
}

#lotteryNotFoundModal .super-button span,
#notFoundModal .super-button span {
  width: 100%;
  text-align: center;
}

/* ==== We're Still Processing (4 hours) Modal ==== */
.not-found-modal {
  background: #121212;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  padding: 24px 20px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
}
.not-found-modal .modal-heading {
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 12px;
  background: linear-gradient(90deg,#ff85fb,#00fff0);
  background-clip: text;           /* <-- standard */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.not-found-modal .modal-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
}
.not-found-modal strong {
  color: #00fff7;
  font-weight: 600;
}
.not-found-modal .btn-close-custom {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 20px;
  background: none;
  border: none;
  color: #fff;
  opacity: 0.8;
}
.not-found-modal .btn-close-custom:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Fallback theme for 4-hours modal (force styles) */
#notFoundModal .modal-content{
  background: rgba(14,14,17,.90) !important;
  color:#fff !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.35);
  position:relative;
}
#notFoundModal .modal-content::before{
  content:""; position:absolute; inset:-2px; border-radius:22px;
  background: conic-gradient(from 0deg,#00ffff,#ff00ff,#7f00ff,#00ffff);
  filter: blur(8px); opacity:.45; z-index:0;
}
#notFoundModal .modal-body{ position:relative; z-index:1; }

/* Center the primary action text no matter what */
#notFoundModal .cl-btn{ justify-content:center; }
#notFoundModal .cl-btn i{ margin-right:8px; }

#notFoundModal .cl-actions {
  justify-content: center !important;
}

/* ===== Stylish Thank You Modal ===== */
.ty-modal .modal-content{
  background: rgba(14, 17, 22, .85);
  color:#eaf2ff;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 12px 32px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
  animation: ty-pop .35s ease-out both;
}
.ty-modal .modal-content::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: 20px;
  background: conic-gradient(from 0deg, #00fff7, #7f00ff, #ff00c8, #00fff7);
  filter: blur(10px);
  opacity:.45;
  z-index:0;
}
@keyframes ty-pop{
  from{ transform: translateY(12px) scale(.98); opacity:0 }
  to  { transform: translateY(0)    scale(1);   opacity:1 }
}

.ty-modal .modal-body{ position:relative; z-index:1; }
.ty-icon{
  width:66px;height:66px;border-radius:50%;
  display:inline-grid;place-items:center;margin:0 auto 10px;
  background: radial-gradient(120% 120% at 30% 30%, #1df2ff 0%, #7b4dff 60%, #ff6ee7 100%);
  box-shadow: 0 0 22px rgba(29,242,255,.45), 0 12px 32px rgba(0,0,0,.35);
}
.ty-icon i{ font-size:30px; color:white; }

.ty-title{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 800;
  font-size: clamp(20px,2.6vw,28px);
  margin: 10px 0 6px;
  background: linear-gradient(90deg,#ff84fb,#00fff0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ty-text{ color:#cfe6ff; opacity:.95; }

.ty-actions{ display:flex; justify-content:center; margin-top:12px; }
.ty-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 22px; border-radius:12px; font-weight:700;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, #ff00c8, #00fff7);
  color:#0d0d0d; text-decoration:none; transition:.28s;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 14px rgba(0,255,247,.28);
}
.ty-btn:hover{ transform: translateY(-2px) scale(1.02); }
.ty-btn i{ color:#0b0b0b; }