/* use ek mukta font family */
    @font-face {
        font-family: 'Ek Mukta';
        src: url('/font/ek-mukta/EkMukta-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }

    @font-face {
        font-family: 'Ek Mukta';
        src: url('/font/ek-mukta/EkMukta-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
    }

    @font-face {
        font-family: 'Ek Mukta';
        src: url('/font/ek-mukta/EkMukta-SemiBold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
    }

    @font-face {
        font-family: 'Ek Mukta';
        src: url('/font/ek-mukta/EkMukta-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
    }

    /*/////////////////// start ////////////////////////*/

    body {
        margin: 0;
        padding: 0;
        font-family: 'Ek Mukta', sans-serif;
        font-size: 17px;
        font-weight: 600;
    }

    .section-title {
        font-size: 27px;
    }

    /* ================= SIDEBAR ================= */
    .sidebar-wrapper {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        font-weight: 400;
        background-color: #171717;
        font-size: 24px;
        padding: 0;
    }

    .sidebar-wrapper::-webkit-scrollbar {
        display: none;
    }

    .sidebar-nav {
        transition: all 1s ease-in;
    }

    .dropdown-toggle::after {
        display: none !important;
    }

    .sidebar-wrapper .nav-link {
        position: relative;
        padding: 12px 30px;
        color: #FFFFFF;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 18px;
        transition: all 0.1s ease-in-out;
        border-radius: 0;
    }

    /* ── Bug 2 fix: reset <button> browser defaults ── */
    .sidebar-wrapper button.nav-link {
        background: transparent;
        border: none;
        text-align: left;
        width: 100%;
        box-shadow: none;
        outline: none;
    }

    .sidebar-wrapper button.nav-link:focus,
    .sidebar-wrapper button.nav-link:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .sidebar-wrapper .nav-link.active {
        background-color: #2249F3 !important;
        color: #ffffff !important;
    }

    /* Active Left Indicator */
    .sidebar-wrapper .nav-link.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 15px;
        background-color: #8BA1FF;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /* Sidebar Icons */
    .sidebar-wrapper .sidebar-icon {
        width: 20px;
        height: 20px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .sidebar-wrapper .nav-link>span:not(.submenu-chevron) {
        white-space: nowrap;
    }

    /* Logo */
    .sidebar-logo {
        max-width: 230px;
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* ================= CHEVRON ================= */
    /* ── Bug 4 fix: chevron is now an <i> directly on .nav-link ── */
    .sidebar-wrapper .nav-link .submenu-chevron {
        margin-left: auto;
        opacity: 0.5;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }

    .sidebar-wrapper .nav-link.active .submenu-chevron,
    .sidebar-wrapper .nav-link[aria-expanded="true"] .submenu-chevron {
        opacity: 1;
    }

    .sidebar-wrapper .nav-link[aria-expanded="true"] .submenu-chevron {
        transform: rotate(180deg);
    }

    /* ================= SUBMENU SLIDE ================= */
    /* ── Bug 1 fix: remove max-height animation, let Bootstrap collapse work,
       animate only opacity + a small translateY for polish ── */
    .sidebar-wrapper .submenu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sidebar-wrapper .submenu.collapsing {
        background-color: #192143;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    .sidebar-wrapper .submenu.show {
        background-color: #192143;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        opacity: 1;
    }

    /* ================= SUBMENU ITEMS ================= */
    .sidebar-wrapper .submenu li a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 10px 30px 10px 53px;
        color: #FFFFFF99;
        font-size: 1rem;
        font-weight: 400;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
        position: relative;
    }

    .sidebar-wrapper .submenu li a:hover {
        background-color: rgba(34, 73, 243, 0.12);
        color: #ffffff;
    }

    .sidebar-wrapper .submenu li a.active {
        color: #ffffff;
        font-weight: 500;
    }

    /* ================= SUBMENU TRIGGER ================= */
    /* ── Bug 3 fix: was targeting >a, now targets >button too ── */
    .has-submenu>button {
        cursor: pointer;
    }

    /* ================= BUTTONS ================= */
    .btn-logout {
        background-color: #2249F3;
        border: none;
        font-weight: 500;
    }

    .btn-outline-custom {
        border: 1px solid #2249F3 !important;
        color: #2249F3;
        border-radius: 100px;
        font-size: 20px;
        font-weight: 600;
        padding: 5px 26px !important;
    }

    .btn-primary-custom {
        background-color: #2249F3;
        color: #ffffff;
        border-radius: 100px;
        font-size: 17px;
        font-weight: 500;
        padding: 8px 18px !important;
        border: none;
        cursor: pointer;
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .btn-primary-logout {
        background-color: #2249F3;
        color: #ffffff;
        border-radius: 100px;
        font-size: 20px;
        font-weight: 700;
        padding: 5px 40px !important;
        border: none;
        cursor: pointer;
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .btn-primary-custom:hover {
        background-color: #1138e2;
        box-shadow: 2px 2px 16px rgba(44, 71, 194, 0.35);
        color: #FFFFFF;
    }

    .custom-pagination .pagination {
        gap: 6px;
    }

    .custom-pagination .page-link {
        border-radius: 999px;
        border: 1px solid #2249F3;
        color: #2249F3;
        padding: 6px 12px;
        font-weight: 600;
        min-width: 42px;
        text-align: center;
    }

    .custom-pagination .page-link:hover {
        color: #ffffff;
    }

    .custom-pagination .page-item.active .page-link {
        background-color: #2249F3;
        border-color: #2249F3;
        color: #fff;
        padding: 20px 17px;
        font-size: 1.2rem;
    }

    .custom-pagination .page-item.disabled .page-link {
        color: #2249F3B2;
        pointer-events: none;
    }

    .btn-primary-logout:hover {
        background-color: #2249F3;
        box-shadow: 0 7px 20px rgba(128, 127, 127, 0.35);
        color: #FFFFFF;
    }

    /* ===== Prize Task Tab Overrides ===== */
    .nav-item .nav-link {
        color: #6c757d;
        border: none;
        background: transparent;
        border: 1px solid #17171766;
        transition: all 0.2s ease;
    }

    .nav-item .nav-link:hover {
        color: #fff;
        background: rgb(34 73 243 / 12%);
    }

    .filter-link:hover {
        background: #0040E0 !important;
    }

    .nav-item .nav-link.active {
        color: #ffffff !important;
        background: #0040E0 !important;
        font-weight: 700;
        border: 1px solid #0040E0;
    }

    /*////////////////// UI Components ///////////////*/
    .topbar {
        background-color: #EDF0F7 !important;
        font-size: 1.5rem;
    }

    /*//////////////////////// Live Campaigns /////////////////*/
    .grey-box {
        width: 50px;
        height: 50px;
        background-color: #CED9EB;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .grey-box img {
        width: 25px;
        height: 25px;
        object-fit: contain;
    }

    .pink-box {
        width: 50px;
        height: 50px;
        background-color: #FDDEE8;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .pink-box img {
        width: 25px;
        height: 25px;
        object-fit: contain;
    }

    .orange-box {
        width: 50px;
        height: 50px;
        background-color: #FFE0CB;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .orange-box img {
        width: 25px;
        height: 25px;
        object-fit: contain;
    }

    .green-box {
        width: 50px;
        height: 50px;
        background-color: #BFEAB7;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .green-box img {
        width: 25px;
        height: 25px;
        object-fit: contain;
    }

    .card-gray-bg {
        background-color: #EDF0F7;
        font-size: 20px;
        font-weight: 600;
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .table-card {
        background-color: #EDF0F7;
    }

    .card-gray-bg:hover {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
    }

    .stat-main-number {
        font-size: 35px;
    }


    /* ///////////cohort area //////////*/

    .cohort-container {
        background-color: #EDF0F7;
        padding: 32px;
        border-radius: 16px;
        border: 0;
        max-width: 100%;
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .cohort-container:hover {
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
    }

    .cohort-item {
        display: flex;
        align-items: center;
        font-size: 18px;
        gap: 16px;
        margin-bottom: 28px;
        font-family: sans-serif;
    }

    .cohort-item:last-child {
        margin-bottom: 0;
    }

    .cohort-label {
        width: 90px;
        font-weight: 600;
    }

    /*//////////////////// Progress & Rings//////////// */
    .progress-visual-wrapper {
        display: flex;
        align-items: center;
        position: relative;
    }

    .percentage-ring {
        width: 78px;
        height: 78px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        border: 15px solid #CED9EB;
        z-index: 2;
    }

    .progress-bar-track {
        height: 48px;
        width: 340px;
        background: #CED9EB;
        border-radius: 0 14px 14px 0;
        margin-left: -30px;
        padding: 10px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .progress-bar-fill {
        height: 100%;
        border-radius: 0 18px 18px 0;
    }

    .bg-pink-brand {
        background-color: #F78EFB;
    }

    .bg-green-brand {
        background-color: #5CDEB3;
    }

    .border-pink-brand {
        border-top-color: #F78EFB;
        border-right-color: #F78EFB;
    }

    .border-green-brand {
        border-color: #5CDEB3;
        border-right-color: #CED9EB;
    }

    /* Checklist */
    .checklist-items li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 18px;
        margin-bottom: 14px;
        font-weight: 400;
    }

    .true-check {
        width: 20px;
    }

    .false-check {
        width: 20px;
    }

    /*//////////////////// Quick Stats Cards/////////////////// */
    .quick-stat-card {
        background: #FFFFFF;
        border-radius: 0 16px 16px 0;
        padding: 16px 20px 16px 28px;
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        position: relative;
    }

    .quick-stat-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 7px;
        background-color: #2249F3;
        border-radius: 0 10px 10px 0;
    }

    .quick-stat-card i {
        font-size: 24px;
        color: #2249F3;
        background: #ffffff;
        width: 54px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        flex-shrink: 0;
    }

    .stat-info-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .stat-info-flex p {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #000;
    }

    .stat-value-text {
        font-size: 20px;
        font-weight: 600;
        color: #000;
    }

    .ls-1 {
        letter-spacing: 1px;
    }

    .quick-stats-icon {
        width: 35px;
        margin: 20px;
    }

    /* Quick Stats Cards END */
    /*------------------ Responsive Styling ------------------*/

    /* Laptops (width ≤ 1366px) */
    @media (max-width: 1366px) {
        body {
            font-size: 18px;
        }

        .section-title {
            font-size: 24px;
        }


        .sidebar-logo {
            max-width: 160px;
        }

        .sidebar-wrapper .nav-link {
            padding: 9px 18px;
            font-size: 0.95rem;
            gap: 12px;
        }

        .sidebar-wrapper .nav-link.active::before {
            width: 10px;
            /* slimmer active bar */
        }

        .sidebar-wrapper .submenu li a {
            padding: 8px 16px 8px 38px;
            font-size: 0.85rem;
        }

        .btn-primary-logout {
            font-size: 15px;
            padding: 5px 18px !important;
        }

        .sidebar-wrapper .nav-link {
            padding: 10px 24px;
        }

        .btn-outline-custom,
        .btn-primary-custom {
            font-size: 18px;
            padding: 4px 20px !important;
        }

        .quick-stat-card {
            padding: 14px 18px 14px 24px;
            gap: 12px;
        }

        .quick-stat-card i {
            width: 48px;
            height: 48px;
            font-size: 22px;
        }

        .stat-info-flex p,
        .stat-value-text {
            font-size: 18px;
        }

        .cohort-container {
            padding: 24px;
        }

        .cohort-item {
            font-size: 16px;
            gap: 12px;
        }

        .percentage-ring {
            width: 70px;
            height: 70px;
            border: 12px solid #CED9EB;
            font-size: 13px;
        }

        .progress-bar-track {
            width: 280px;
            height: 40px;
            padding: 8px;
            margin-left: -25px;
        }
    }

    /* Tablets (width ≤ 1024px) */
    @media (max-width: 1024px) {
        body {
            font-size: 16px;
        }

        .section-title {
            font-size: 22px;
        }

        .sidebar-wrapper {
            width: 185px;
            min-width: 185px;
        }

        .sidebar-logo {
            max-width: 130px;
        }

        .sidebar-wrapper .nav-link {
            padding: 8px 14px;
            font-size: 0.875rem;
            gap: 10px;
        }

        .sidebar-wrapper .sidebar-icon {
            width: 17px;
            height: 17px;
        }

        .sidebar-wrapper .submenu li a {
            padding: 7px 12px 7px 30px;
            font-size: 0.8rem;
        }

        .btn-primary-logout {
            font-size: 14px;
            padding: 5px 14px !important;
        }

        .sidebar-wrapper .nav-link {
            padding: 8px 20px;
        }

        .btn-outline-custom,
        .btn-primary-custom {
            font-size: 16px;
            padding: 4px 18px !important;
        }

        .quick-stat-card {
            flex-direction: column;
            align-items: flex-start;
            padding: 12px 16px;
        }

        .quick-stat-card i {
            width: 42px;
            height: 42px;
            font-size: 20px;
            margin-bottom: 8px;
        }

        .stat-info-flex {
            flex-direction: column;
            align-items: flex-start;
        }

        .stat-info-flex p,
        .stat-value-text {
            font-size: 16px;
        }

        .cohort-container {
            padding: 16px;
        }

        .cohort-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            font-size: 14px;
        }

        .percentage-ring {
            width: 60px;
            height: 60px;
            border: 10px solid #CED9EB;
            font-size: 12px;
        }

        .progress-bar-track {
            width: 220px;
            height: 32px;
            padding: 6px;
            margin-left: -20px;
        }
    }

    /* /////////////forgot password */
    .forget-psw-card {
        background: #ffffff;
        border: 2px solid blue;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    }

    .forget-psw-title {
        font-size: 4vh;
        color: #ffffff;
        font-weight: 600;
        text-align: center;
        margin-bottom: 8px;
    }

    .forget-psw-subtitle {
        font-size: 17px;
        margin-bottom: 22px;
    }

    .forget-psw-label {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .forget-psw-input {
        height: 44px;
        border-radius: 8px;
        font-size: 17px;
    }

    .forget-psw-btn {
        background: #1a4fff;
        border: none;
        height: 46px;
        border-radius: 8px;
        font-weight: 500;
        font-size: 20px;
        transition: 0.2s ease-in-out;
        color: #fff;
    }

    .forget-psw-btn:hover {
        background: #0036d6;
    }

    .forget-psw-back {
        display: block;
        text-align: center;
        margin-top: 18px;
        font-size: 20px;
        color: #ffffff;
        text-decoration: none;
    }

    .forget-psw-back:hover {
        text-decoration: underline;
        color: #dcdcdc;
    }

    .alert-toast-wrapper {
        position: fixed;
        top: 20px;
        left: 60%;
        transform: translateX(-50%);
        z-index: 1080;
        width: 100%;
        max-width: 600px;
    }

    .alert-toast-wrapper .alert {
        animation: slide-down 0.2s ease-out forwards;
    }

    .alert-toast-wrapper .alert.slide-up {
        animation: slide-up 0.2s ease-in forwards;
    }

    @keyframes slide-down {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slide-up {
        from {
            transform: translateY(0);
            opacity: 1;
        }

        to {
            transform: translateY(-20px);
            opacity: 0;
        }
    }

    /* ═══════════════════════════════════════════════
                CHALLENGE TABS — Base
    ═══════════════════════════════════════════════ */

    .challenges-section .challengue-tabs {
        background-color: #F0F3F899;
        border: 1px solid #F1F5F9;
        box-shadow: 0px 2px 20px -3px #2e5bff69;
        transition: all 0.2s ease;
        min-height: 180px;
    }

    .challenges-section .tab-description {
        font-size: 1.2rem;
        line-height: 1.5;
    }


    /* ── Active & Hover States ── */

    .challenges-section .challengue-tabs.nav-link.active,
    .challenges-section .challengue-tabs.nav-link:hover {
        background-color: #2E5BFF;
        color: white !important;
        border-color: transparent;
        box-shadow: 0px 2px 20px 2px #2e5bff69;
    }

    .challenges-section .challengue-tabs.nav-link:hover {
        transform: translateY(-3px);
    }

    /* ── Title Badge ── */

    .challenges-section .challengue-tabs.nav-link.active .title,
    .challenges-section .challengue-tabs.nav-link:hover .title {
        background-color: #FFFFFF33 !important;
    }


    /* ── Tab Description Text ── */

    .challenges-section .challengue-tabs.nav-link.active .tab-description span,
    .challenges-section .challengue-tabs.nav-link:hover .tab-description span {
        color: #FFFFFFCC !important;
        font-weight: 500;
    }


    /* ═══════════════════════════════════════════════
         STATUS BADGE — Dot Indicator
    ═══════════════════════════════════════════════ */

    .status-dot::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: currentColor;
        margin-right: 6px;
        vertical-align: middle;
    }


    /* ═══════════════════════════════════════════════
                     MODAL BUTTONS
    ═══════════════════════════════════════════════ */

    .model-btn-outline,
    .model-btn-custom {
        width: 47%;
        font-weight: 500;
        transition: opacity 0.15s ease;
    }

    .model-btn-outline,
    .form-close-btn,
    .icon-btn {
        border: 1px solid #2249F3;
        color: #2249F3;
        background-color: transparent;
    }


    .model-btn-outline:hover,
    .form-close-btn:hover,
    .icon-btn:hover {
        background-color: #2b4fee29;
        color: #2446ff;
        border: 1px solid;
    }

    .model-btn-custom,
    .form-submit-btn {
        background-color: #2249F3;
        color: white;
        border: 1px solid transparent;
    }

    .model-btn-custom:hover,
    .form-submit-btn:hover {
        background-color: #1a3dd8;
        color: #fff;
    }

    .border-dashed {
        border: 1px dashed #171717;
        padding: 10px 15px;
    }

    /* -----Quiz Tab -------- */

    .indicator {
        height: 50px;
        width: 51px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: #171717;
        position: relative;
        background-color: #c6c6c6;
        border: 3px solid #616161;
        z-index: 1;
    }

    .step-line {
        height: 4px;
        width: 18rem;
        background-color: #CED9EB;
        align-self: flex-start;
        margin-top: 23px;
        margin-left: -56px;
        margin-right: -79px
    }


    .btn-check:checked+.btn {
        background: rgb(206, 217, 235);
        border: 2px solid rgb(34, 73, 243);
        cursor: pointer;
        color: rgb(34, 73, 243);
    }

    .btn-close-ticket {
        font-size: 20px;
        color: #BE123C;
        border: 1px solid #BE123C !important;
        border-radius: 10px;
        padding: 4px 18px;
        background: transparent;
        cursor: pointer;
    }


    .quiz-btn {
        background-color: #2249F3;
        color: #fff;
        font-size: 1.1rem;
    }

    .quiz-btn:hover {
        background-color: #053ad8;
        color: #fff;
    }

    .quiz-form label {
        font-size: 1.2rem !important;
    }

    .details-list li::marker {
        color: #0036d6;
    }

    .optional-label {
        background-color: #AFAFAF80;
        position: absolute;
        top: 0;
        left: 0;
        color: #000;
        border-end-end-radius: 20px;
        border-start-start-radius: 17px;
    }

    .upload-box {
        width: 130px;
        height: 130px;
        cursor: pointer;
        border: none;
        background: #EDF0F7;
        color: #2249F3 !important;
    }

    /* .form-select {
        --bs-form-select-bg-img: none;
    } */

    .form-check-input:checked {
        background-color: #2249F3 !important;
    }

    button:disabled {
        background-color: #6c757d !important;
        border-color: #6c757d !important;
        opacity: 0.65;
        cursor: not-allowed;
    }

    .opt-dropdown {
        right: 13px;
        top: 50%;
        transform: translateY(-45%);
        z-index: 5;
        color: #2249F3;
        font-size: 22px;
    }

    .selected-option {
        padding: 4px 18px;
        text-align: center;
        border-radius: 5px;
        font-weight: 600;
        border: 1px solid rgba(0, 0, 0, 0.5);
        transition: 0.2s;
    }

    /* Color 1 */
    .option-style-1 {
        background: #DBE0FD;
    }

    /* Color 2 */
    .option-style-2 {
        background: #E8D9F7;
    }

    /* Color 3 */
    .option-style-3 {
        background: #DAE1E4;
    }

    .remove-image {
        bottom: 9px;
        right: 9px;
        width: 28px;
        height: 28px;
        display: flex;
        padding-top: 5px;
        align-items: center;
        background: #2249F3;
        justify-content: center;
    }

    /* Coupon Configuration */

    .product-list .nav-link {
        border: none;
        text-transform: uppercase;
        font-size: 1.2rem;
        letter-spacing: 0.5px;
    }

    /* Coupons */

    .coupon-form input,
    .coupon-form select,
    .filled-select {
        border: 1px solid #000;
        padding: 7px 15px;
    }

    .coupon-card {
        border: 1px solid #878787BF;
        max-width: 280px;
        transition: all .3s ease;
        cursor: pointer;
    }

    .coupon-card:hover {
        box-shadow: 0px 0px 10px 0px #2249F3CC;
        border: 1px solid #2249F3;
    }

    .coupon-logo {
        width: 21% !important
    }

    .coupon-details {
        width: 79%;
    }

    .challenges-card {
        padding: 2rem;
        font-weight: 600;
        background-color: #EDF0F7;
        border-radius: 20px;
        gap: 1.3rem;
    }

    .clear-filter a {
        background: #0040E01A;
        color: #0040E0;
        border: 1px solid #0040E0;
        padding: 5px 20px;
        font-weight: 700;
        font-size: 1.2rem;
    }

    .clear-filter a:hover {
        background: #2249F3;
        color: #fff;
    }

    /* Coupon Cateogry DropDoown */

    .ts-wrapper.multi .ts-control {
        background: #ffffff !important;
        /* border: 1.5px solid #000000 !important; */
        border-radius: 12px !important;
        padding: 8px 44px 8px 12px !important;
        min-height: 48px !important;
        box-shadow: none !important;
    }

    .ts-wrapper.multi.focus .ts-control {
        border-color: #2249F3 !important;
        box-shadow: 0 0 0 3px rgba(34, 73, 243, 0.10) !important;
    }

    .ts-wrapper .ts-control .item {
        background: #CED9EB !important;
        color: #000000 !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 5px 6px 5px 14px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    .ts-wrapper .ts-control .item .remove {
        color: #333333 !important;
        border-left: none !important;
        font-size: 40px !important;
    }

    .ts-wrapper .ts-dropdown {
        border-radius: 12px !important;
        border: 1.5px solid #d0d5e8 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09) !important;
    }

    .ts-wrapper .ts-dropdown .option {
        padding: 11px 16px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f1f3f9 !important;
    }

    .ts-wrapper .ts-dropdown .option.selected {
        background: #eaf0fc !important;
        color: #1a3a7a !important;
    }

    .ts-chevron {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #888;
        font-size: 18px;
        z-index: 23;
        transition: transform .2s;
    }

    .ts-wrapper.multi .ts-control>div {
        margin: 0 10px 3px 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        /* flex-direction: row; */
        height: 40px;
        overflow: hidden;
    }

    /* Preview screen */

    .phone-wrapper {
        position: relative;
        width: 250px;
        height: 487px;
        margin: auto;
    }

    /* Actual screen area */
    .phone-screen {
        position: absolute;
        top: 11px;
        left: 18px;
        max-width: calc(100% - 35px);
        height: calc(100% - 20px);
        border-radius: 36px;
        background: linear-gradient('');
        overflow: hidden;
        background-size: cover;
        background-position: center;

    }

    /* Content inside phone */
    .phone-content {
        position: relative;
        z-index: 2;
        padding: 10px;
        color: white;
    }

    /* Phone frame overlay */
    .phone-frame-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 5;
        pointer-events: none;
    }

    .question-text {
        font-size: 0.9rem;
        font-weight: 700;
        margin-bottom: 3rem;
        line-height: 1.4;
    }

    .preview-option {
        border-radius: 11px;
        padding: 7px 10px;
        margin-bottom: 10px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s;
        backdrop-filter: blur(4px);
    }

    .preview-option span {
        font-weight: 700;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
    }

    .option-check {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .progress-bar {
        height: 5px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50px;
        margin-bottom: 15px;
    }

    .progress {
        height: 100%;
        transition: width 0.3s;
    }

    .product-card {
        position: relative;
        padding: 8px;
        background-size: cover;
        height: 132px;
        display: inline-flex;
        justify-content: center;
        width: 100%;
        background-repeat: no-repeat;
    }


    .product-card-inner {
        position: relative;
        width: 100%;
        padding: 3px 10px;
        background: transparent;
    }

    /* Border layer only */
    .product-card-inner::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 10px;
        clip-path: polygon(0 0,
                100% 0,
                100% 40%,
                94% 50%,
                100% 60%,
                100% 100%,
                0 100%,
                0 60%,
                6% 50%,
                0 40%);
        border: 1px solid rgba(244, 203, 204, 1);
        filter: drop-shadow(0 0 2px rgba(217, 166, 168, 0.9));
        pointer-events: none;
    }

    .product-shadow-wrapper {
        border-radius: 50%;
        width: 120px;
        display: flex;
        padding: 27px;
        align-items: center;
        justify-content: center;
        height: 120px;
        margin-bottom: -5px;
    }

    /* Quiz View */

    .question-card {
        box-shadow: -3px 0px 0px #1c22ff;
        border-radius: 1.7rem;
    }

    /* Admin Quiz Template */
    .option-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #2249F3D9;
        margin-right: 4px;
        vertical-align: middle;
    }

    .coupon-info td {
        background-color: transparent !important;
        padding: 10px 20px;
    }

    .task-table td {
        padding: 15px 20px;
    }

    .inline-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        justify-content: space-between;
        background-color: #EDF0F7;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        padding: 7px 10px 7px 14px;
        width: 100%;
    }

    .inline-pill.editing {
        background-color: #fff;
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }

    .pill-text {
        font-size: 15px;
        color: #495057;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 240px;
    }

    .pill-input {
        border: none;
        outline: none;
        background: transparent;
        font-size: 15px;
        color: #495057;
        width: 240px;
        padding: 0;
    }

    .pill-edit-btn {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: #6c757d;
        display: flex;
        align-items: center;
        font-size: 13px;
        flex-shrink: 0;
    }

    .pill-edit-btn:hover {
        color: #343a40;
    }

    /* Challengues Slider Animation - GSAP */

    .carousel-tabs {
        position: relative;
        overflow: hidden;
    }

    .carousel-tabs>.tab-pane {
        width: 100%;
        background: #EDF0F7;
    }

    /* During animation we need panes stacked absolutely */
    .carousel-tabs.is-animating>.tab-pane {
        position: absolute;
        top: 0;
        left: 0;
    }

    .carousel-tabs.is-animating {
        background-color: inherit;
    }

    .active-card {
        width: 20%;
        min-height: 270px;
        padding: 0 20px;
    }

    .custom-pagination .pagination {
        --bs-pagination-color: #000000;
        --bs-pagination-bg: transparent;
        --bs-pagination-border-color: rgba(0, 81, 255, 0.2);
        --bs-pagination-hover-color: #ffffff;
        --bs-pagination-hover-bg: #2249F3;
        --bs-pagination-active-color: #fff;
        --bs-pagination-active-bg: #2249F3;
        --bs-pagination-active-border-color: #446ef7;
        gap: 4px;
        margin-bottom: 0;
    }

    .custom-pagination .page-link {
        font-size: 1rem;
        line-height: 1;
        padding: 20px 17px;
        min-width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 6px !important;
    }

    /* Laravel's default pagination view renders prev/next as raw HTML entities
       (&laquo; / &raquo;) or SVGs depending on Blade view — this keeps them
       the same visual size as the numbers */
    .custom-pagination .page-link svg {
        width: 20px;
        height: 20px;
    }

    .category-pill {
        border-radius: 13px;
        border: 1px solid #2249F3;
        background: #2249F31A;
        color: #2249F3;
        font-size: .9rem;
        display: block;
    }

    /* Seed Live Preview */
    .inner-layer {
        top: 11px;
        left: 8px;
        right: 10px;
        bottom: 12px;
        background: #0F193A;
        border-radius: 27px;
        overflow: hidden;
        z-index: 1;
    }

    .share-story {
        background: #0B121F;
        border: 1px solid #4DDEFF;
        color: #fff;
        font-size: 8px;
        padding: 1px 12px;
    }

    .seed-preview-content h4,
    .product-name {
        color: #FFE8A5;
        text-shadow: 0px 0px 5px #E6C35C;
        font-size: 1rem;
    }

    .product-name {
        font-size: 1.2rem;
    }

    .claim-btn {
        border-radius: 12px;
        background: #4DDEFF;
        padding: 6px 50px;
        border: none;
        font-size: .9rem;
    }

    .play-btn {
        border-radius: 12px;
        border: 1px solid #4DDEFF;
        padding: 6px 50px;
        background: transparent;
        color: #fff;
        font-size: .9rem;
    }

    .glow-logo {
        filter: drop-shadow(0 0 20px rgba(77, 222, 255, 0.6)) drop-shadow(0 0 20px rgba(77, 222, 255, 0.35));
    }

    /* Brand Drop View CSS */

    /* ==================== Breadcrumb Navigation ==================== */
    .breadcrumb-nav .breadcrumb {
        font-size: 1rem;
        background: transparent;
        padding: 0;
        margin: 0;
    }

    .breadcrumb-item {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .breadcrumb-link {
        text-decoration: none;
        color: #171717;
        font-weight: 500;
    }

    .breadcrumb-link:hover {
        color: #2249f3;
    }

    .breadcrumb-item.separator {
        color: #171717;
        font-weight: 500;
        margin: 0 0.5rem;
    }

    .breadcrumb-text {
        font-size: 1rem;
        font-weight: 600;
        color: #171717;
    }

    .breadcrumb-text-active {
        font-size: 1rem;
        font-weight: 600;
        color: #2249f3;
    }

    /* ==================== Page Header ==================== */
    .page-header {
        padding: 2rem 0 1rem;
    }

    .page-title {
        font-size: 1.875rem;
        font-weight: 700;
        color: #171717;
        margin: 0 0 0.5rem 0;
        letter-spacing: -0.5px;
    }

    .page-subtitle {
        font-size: 1.25rem;
        color: rgba(23, 23, 23, 0.8);
        margin: 0;
        font-weight: 400;
    }

    /* ==================== Stats Container ==================== */
    .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .stat-card {
        background: #edf0f7;
        border-radius: 1.25rem;
        padding: 1.375rem 1.5rem;
        display: flex;
        flex-direction: column;
    }

    .stat-card-header {
        margin-bottom: 1.25rem;
    }

    .stat-card-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #171717;
        margin: 0;
    }

    .stat-card-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1rem;
    }

    .stat-number {
        font-size: 2.1875rem;
        font-weight: 600;
        color: #171717;
        line-height: 1;
    }

    .stat-icon {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
    }

    .stat-icon-blue {
        background: #ced9eb;
    }

    .stat-icon-pink {
        background: #fddee8;
    }

    .stat-icon-orange {
        background: #ffe0cb;
    }

    .stat-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* ==================== Section Headers ==================== */
    .section-header {
        margin-bottom: 1.5rem;
    }

    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #171717;
        margin: 0 0 0.5rem 0;
    }

    .section-subtitle {
        font-size: 1.05rem;
        color: rgba(23, 23, 23, 0.8);
        margin: 0;
        font-weight: 400;
    }

    /* ==================== Eligibility Section ==================== */
    .eligibility-section {
        background: #edf0f7;
        border-radius: 1.25rem;
        padding: 1.5rem;
    }

    .tasks-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .task-card {
        background: white;
        border-radius: 1rem;
        padding: 1.25rem;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2rem;
    }

    .task-content {
        display: flex;
        gap: 1rem;
        flex: 1;
    }

    .task-image {
        width: 5rem;
        height: 5rem;
        border-radius: 0.75rem;
        overflow: hidden;
        flex-shrink: 0;
    }

    .task-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .task-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .task-name {
        font-size: 1rem;
        font-weight: 600;
        color: #171717;
        margin: 0;
    }

    .task-desc {
        font-size: 0.95rem;
        color: rgba(23, 23, 23, 0.7);
        margin: 0.25rem 0 0 0;
    }

    .task-metrics {
        display: flex;
        gap: 3rem;
        flex: 1;
        justify-content: flex-end;
    }

    .metric {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        min-width: 150px;
    }

    .metric-label {
        font-size: 0.8rem;
        color: rgba(23, 23, 23, 0.7);
        text-align: center;
    }

    .metric-value {
        font-size: 1.1rem;
        font-weight: 600;
        color: #171717;
    }

    .metric-completion {
        align-items: flex-start;
    }

    .completion-info {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .progress-bar-container {
        width: 100%;
        height: 0.5rem;
        background: #e5e7eb;
        border-radius: 0.25rem;
        overflow: hidden;
    }

    .progress-fill {
        height: 100%;
        background: #22c55e;
        border-radius: 0.25rem;
        transition: width 0.3s ease;
    }

    /* ==================== Winners Section ==================== */
    .winners-section {
        background: #edf0f7;
        border-radius: 1.25rem;
        padding: 1.5rem;
    }

    .section-header-with-actions {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        gap: 2rem;
    }

    .section-actions {
        flex-shrink: 0;
    }

    .btn-export {
        background: white;
        border: 2px solid #2249f3;
        color: #2249f3;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
    }

    .btn-export:hover {
        background: #f3f6ff;
    }

    /* ==================== Winners Filters ==================== */
    .winners-filters {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .filter-group {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .filter-btn {
        background: white;
        border: 1px solid rgba(23, 23, 23, 0.4);
        color: rgba(23, 23, 23, 0.55);
        padding: 0.75rem 1.5rem;
        border-radius: 1.25rem;
        font-weight: 500;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .filter-btn:hover {
        border-color: #2249f3;
        color: #2249f3;
    }

    .filter-btn-primary {
        background: #0040e0;
        color: white;
        border-color: #0040e0;
    }

    .filter-btn-primary:hover {
        background: #0033b0;
        border-color: #0033b0;
    }

    .sort-dropdown {
        flex-shrink: 0;
    }

    .sort-btn {
        background: white;
        border: 1px solid #171717;
        color: #171717;
        padding: 0.75rem 1.5rem;
        border-radius: 100rem;
        font-weight: 500;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
    }

    .sort-btn:hover {
        background: #f5f5f5;
    }

    /* ==================== Winners List ==================== */
    .winners-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .winner-card {
        background: white;
        border: 1px solid #f1f5f9;
        border-radius: 0.9375rem;
        padding: 1.25rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        align-items: center;
    }

    .winner-column {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .winner-label {
        font-size: 0.8125rem;
        color: rgba(23, 23, 23, 0.7);
        font-weight: 500;
    }

    .winner-value {
        font-size: 0.875rem;
        color: #171717;
        font-weight: 600;
    }

    .winner-status {
        align-items: center;
        gap: 0.5rem;
    }

    .winner-date {
        text-align: right;
    }

    .winner-time {
        font-size: 0.75rem;
        color: rgba(23, 23, 23, 0.8);
    }

    .status-badge {
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0.375rem 0.625rem;
        border-radius: 0.56rem;
        text-align: center;
        min-width: 80px;
    }

    .status-claimed {
        background: #dcfce7;
        color: #15803d;
    }

    .status-unclaimed {
        background: #faf0e0;
        color: #df982d;
    }

    /* ==================== Pagination ==================== */
    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e5e7eb;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .pagination-info {
        font-size: 0.95rem;
        color: rgba(23, 23, 23, 0.8);
    }

    .showing-text {
        font-weight: 500;
    }

    .pagination-nav {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .pagination-btn {
        background: white;
        border: 1px solid #e5e7eb;
        color: #171717;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.9rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
    }

    .pagination-btn:hover:not(:disabled) {
        background: #f5f5f5;
        border-color: #171717;
    }

    .pagination-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pagination-number {
        background: white;
        border: 1px solid #e5e7eb;
        color: #171717;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.9rem;
        cursor: pointer;
        min-width: 2.5rem;
        text-align: center;
        transition: all 0.3s ease;
    }

    .pagination-number:hover {
        border-color: #2249f3;
        color: #2249f3;
    }

    .pagination-number.active {
        background: #2249f3;
        color: white;
        border-color: #2249f3;
    }

    /* ==================== Campaign Details ==================== */
    .campaign-details {
        background: #edf0f7;
        border-radius: 1.25rem;
        padding: 1.5rem;
    }

    .details-table {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .detail-row:last-child {
        border-bottom: none;
    }

    .detail-label {
        font-size: 0.95rem;
        color: rgba(23, 23, 23, 0.8);
        font-weight: 500;
        flex: 0 0 40%;
    }

    .detail-value {
        font-size: 0.95rem;
        color: #171717;
        font-weight: 600;
        text-align: right;
        flex: 1;
    }

    /* ==================== Action Buttons ==================== */
    .action-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        margin-top: 2rem;
        flex-wrap: wrap;
    }

    .button-group {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.95rem;
        border: none;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .btn-primary {
        background: #0040e0;
        color: white;
    }

    .btn-primary:hover {
        background: #0033b0;
        text-decoration: none;
    }

    .btn-secondary {
        background: white;
        color: #0040e0;
        border: 2px solid #0040e0;
    }

    .btn-secondary:hover {
        background: #f3f6ff;
        text-decoration: none;
    }

    /* ==================== Date Layout ==================== */
    .drp-trigger {
        cursor: pointer;
        background-image: url("{{ asset('brands-images/calendar.png') }}");
        background-repeat: no-repeat;
        background-position: 10px center;
        background-size: 16px;
        padding-left: 20px !important;
    }

    .drp-calendar {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        z-index: 1000;
        width: 300px;
        background: #fff;
        border: 1px solid #E0E0E0;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
        padding: 12px;
    }

    .drp-calendar.show {
        display: block;
    }

    .drp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        font-weight: 600;
        color: #171717;
    }

    .drp-nav-btn {
        border: none;
        background: transparent;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        cursor: pointer;
    }

    .drp-nav-btn:hover {
        background: #EDF0F7;
    }

    .drp-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px 0;
        text-align: center;
    }

    .drp-dow {
        font-size: 12px;
        color: #9c9c9c;
        padding: 4px 0;
        font-weight: 600;
    }

    .drp-day {
        font-size: 16px;
        padding: 6px 0;
        border-radius: 8px;
        cursor: pointer;
        color: #171717;
    }

    .drp-day:hover:not(.disabled):not(.empty) {
        background: #2249F31A;
        color: #000;
    }

    .drp-day.empty {
        visibility: hidden;
        cursor: default;
    }

    .drp-day.disabled {
        color: #d1d5db;
        cursor: not-allowed;
    }

    .drp-day.selected {
        background: #2249F3;
        color: #fff;
        font-weight: 600;
    }

    .drp-day.in-range {
        background: #2249F31A;
        border-radius: 0;
    }

    .drp-day.range-start {
        border-radius: 18px 0 0 18px;
    }

    .drp-day.range-end {
        border-radius: 0 18px 18px 0;
    }

    /* ==================== Footer Buttons ==================== */
    .btn-outline-primary-soft {
        border: 1px solid #2249f3;
        color: #2249f3;
        background: transparent;
        border-radius: 10px;
        padding: 10px 30px;
        font-weight: 700;
        font-size: 18.5px;
        line-height: 1;
        white-space: nowrap;
        transition: background 0.2s ease;
    }

    .btn-outline-danger-soft {
        border: 1px solid #8e1011;
        color: #8e1011;
        background: transparent;
        border-radius: 10px;
        padding: 10px 30px;
        font-weight: 700;
        font-size: 18.5px;
        line-height: 1;
        white-space: nowrap;
        transition: background 0.2s ease;
    }

    .btn-outline-success-soft {
        border: 1px solid #15803D;
        color: #15803D;
        background: transparent;
        border-radius: 10px;
        padding: 10px 30px;
        font-weight: 700;
        font-size: 18.5px;
        line-height: 1;
        white-space: nowrap;
        transition: background 0.2s ease;
    }

    .btn-primary-solid {
        background: #2249f3;
        color: #ffffff;
        border: 1px solid #2249f3;
        border-radius: 10px;
        padding: 10px 30px;
        font-weight: 700;
        font-size: 18.5px;
        line-height: 1;
        white-space: nowrap;
        transition: background 0.2s ease;
    }

    .btn-outline-primary-soft:hover {
        background: #2249f3;
        color: #ffffff;
    }

    .btn-outline-danger-soft:hover {
        background: #8e1011;
        color: #ffffff;
    }

    .btn-outline-success-soft:hover {
        background: #15803D;
        color: #ffffff;
    }

    /* Game Preview */
    .game-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 88%;
        top: 7%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .game-level {
        width: 60%;
        position: absolute;
        top: 16%;
        left: 50%;
        transform: translate(-50%);
        background-color: #1d1422ed;
        font-size: .7rem;
        text-align: center;
        border-radius: 10px;
        padding: 5px 10px;
    }

    .grab-items .item-1{
        width: 20%;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%);
    }

    .grab-items .item-2{
        width: 20%;
        position: absolute;
        bottom: 30%;
        left: 60%;
        transform: translate(-50%);
    }



    .basket-img {
        width: 40%;
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translate(-50%);
    }

    .game-header .back-btn {
        background-color: #1d1422ed;
        padding: 5px;
        border: 1px solid #1d1422;
    }

    .game-header .center {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        font-size: .7rem;
        gap: 5px;
    }

    .game-header .center .purple-block {
        background-color: #1d1422ed;
        border-radius: 10px;
        border: 1px solid #1d1422;
        padding: 3px 10px;
        font-size: .5rem;
    }

    .game-header .end {
        background-color: #1d1422ed;
        font-size: .4rem;
        padding: 5px 10px;
    }

    .end .misses-dots {
        width: 6px;
        height: 6px;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 50%;
    }

    .misses-dots:first-child {
        background-color: e2573f;
        box-shadow: 0 0 5px 0 #e2573f88;
    }




    /* ==================== Responsive Design ==================== */
    @media (max-width: 1024px) {
        .stats-container {
            grid-template-columns: repeat(2, 1fr);
        }

        .winner-card {
            grid-template-columns: repeat(2, 1fr);
        }

        .task-metrics {
            flex-direction: column;
            gap: 1rem;
            width: 100%;
            justify-content: flex-start;
        }

        .section-header-with-actions {
            flex-direction: column;
            align-items: flex-start;
        }

        .winners-filters {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    @media (max-width: 768px) {
        .stats-container {
            grid-template-columns: 1fr;
        }

        .page-title {
            font-size: 1.5rem;
        }

        .winner-card {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .action-buttons {
            flex-direction: column;
            width: 100%;
        }

        .button-group {
            width: 100%;
        }

        .btn-primary,
        .btn-secondary {
            width: 100%;
        }

        .pagination-container {
            flex-direction: column;
            align-items: flex-start;
        }

        .pagination-nav {
            width: 100%;
            overflow-x: auto;
        }

        .task-card {
            flex-direction: column;
        }

        .task-metrics {
            gap: 1rem;
        }
    }

    @media (max-width: 480px) {
        .page-title {
            font-size: 1.25rem;
        }

        .page-subtitle {
            font-size: 0.95rem;
        }

        .stat-number {
            font-size: 1.75rem;
        }

        .winners-filters {
            gap: 0.75rem;
        }

        .filter-btn {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
        }
    }



    /* LAPTOP RESPONSIVE  - 1440PX*/

    @media (max-width:1440px) {

        .sidebar-logo {
            max-width: 180px;
        }

        .sidebar-wrapper .nav-link {
            padding: 10px 20px;
            font-size: 1rem;
            gap: 14px;
        }

        .brand-email,
        .quiz-duration {
            font-size: 0.8rem;
        }

        .brand-logo {
            height: 260px !important;
        }

        .sidebar-wrapper .submenu li a {
            padding: 9px 20px 9px 44px;
            font-size: 0.9rem;
        }

        .btn-primary-logout {
            font-size: 16px;
            padding: 5px 24px !important;
        }

        .card-gray-bg {
            padding: 23px !important;
            min-height: 130px !important;
        }

        .reward-card {
            min-height: 166px !important;
        }

        .coupon {
            width: 25% !important;
        }

        .coupon-list {
            /* padding: 10px !important; */
            font-size: 1rem;
        }

        .coupon-details {
            width: 72.333333% !important
        }

        .coupon-logo {
            width: 27.666667% !important
        }

        .active-card {
            width: 20%;
            min-height: 300px;
            padding: 0 10px;
        }

        .ingame-content-card {
            gap: 0.5rem !important;
        }

        .details-logo {
            width: 27% !important;
            flex: 0 0 auto;
        }

        .details-info {
            width: 72% !important;
            flex: 0 0 auto;
        }

        /* challengues */
        .challenges-card {
            padding: 1.5rem;
        }

        .challenges-card h4 {
            font-size: 1.4rem;
        }

        .preview-card {
            /* padding: 0 !important; */
            width: 28% !important;
        }

        .task-type,
        .stat-title {
            font-size: 1rem !important;
        }

        .quiz-duraiton .coupon-type {
            width: 11% !important;
        }

        .opt-dropdown {
            right: 5px;
        }

        .phone-screen {
            max-width: calc(100% - 18px) !important;
            left: 11px !important;
        }

        .product-image,
        .coupon-name {
            width: 15% !important;
        }

        .product-image img {
            width: 100px !important;
            height: 100px;
        }

        .banner-img {
            height: 210px;
        }

        .banner-image,
        .banner-duration {
            width: 11%;
            font-size: 0.9rem;
        }

        .coupon-duration {
            font-size: .9rem;
        }

        .col-xxl-2 {
            flex: 0 0 auto;
            width: 20.66666667%;
        }

        .banner-category,
        .performance {
            font-size: .8rem !important;
        }

        .banner-action,
        .status {
            width: 10% !important;
            gap: 0.8rem !important;
        }

        .question-list {
            width: 66.66% !important;
        }

        .preview {
            width: 33.33% !important;
        }

        .sidebar-wrapper .nav-link i {
            margin-right: 0;
        }

        .coupon-action {
            width: 10%;
            gap: 10px !important
        }

        .brand-coupon {
            width: 13%;
            gap: 10px !important
        }

        /* Live preview */
        .app-header h2 {
            font-size: 1.7rem;
        }

        .phone-wrapper {
            width: 237px !important;
            height: 497px !important;
        }

        .banner-info,
        .seed-details,
        .quiz-coupon-details {
            flex: 0 0 auto;
            width: 70% !important;
        }

        .banner-track,
        .seed-preview,
        .quiz-live-preview {
            flex: 0 0 auto;
            width: 30% !important;
        }

        .game-action {
            gap: 0.5rem !important;
        }
    }