/* font rubik */

.font-rubik {
    font-family: "Rubik", sans-serif;
}


/* font jakarta */

body {
    font-family: "Plus Jakarta Sans", sans-serif;
}


/* background solid */

.bg-primary {
    background-color: #7E3FF2;
}

.bg-accent {
    background-color: #7F32CC;
}

.bg-success {
    background-color: #1F9F04;
}

.bg-danger {
    background-color: #980D05;
}

.bg-secondary {
    background-color: #E4C9FE;
}

.bg-info {
    background-color: #04926A;
}

.bg-light {
    background-color: #26355B;
}

.bg-dark {
    background-color: #1D2028;
}
.bg-dark-subtle {
    background-color: #23252B;
}

.bg-muted {
    background-color: #e5e7eb;
}

.bg-tertiary {
    background-color: #363A43;
}

.bg-highlight {
    background-color: #DAB4FF;
}

.bg-energy {
    background-color: #8DCEFF;
}

.bg-focus {
    background-color: #ECBCB9;
}


/* Indigo / Blue */


/* background gradient */

.bg-gradient-primary {
    background: #7E3FF2; 
    background: linear-gradient(150deg, #7E3FF2 0%, #B084F5 100%);
}


.bg-gradient-secondary {
    background: #E4C9FE; 
    background: linear-gradient(120deg, #E4C9FE 0%, #C89BFA 100%);
}



/* text */

.text-primary {
    color: #7E3FF2;
}

.text-accent {
    color: #7F32CC;
}

.text-success {
    color: #1F9F04;
}

.text-warning {
    color: #FBBF24;
}

.text-danger {
    color: #E1080F;
}

.text-secondary {
    color: #E4C9FE;
}

.text-info {
    color: #04926A;
}

.text-light {
    color: #0E98FD;
}

.text-dark {
    color: #1D2028;
}

.text-muted {
    color: #e5e7eb;
}

.text-tertiary {
    color: #363A43;
}

.text-highlight {
    color: #DAB4FF;
}

.text-footer {
    color: #828E9E;
}


/* button */

.btn-primary {
    background-color: #7E3FF2;
    color: white;
}
.btn-primary:disabled {
    background-color: #23252B;
}
.btn-primary:hover {
    cursor: pointer;
}

.btn-white {
    background-color: white;
    color: #7E3FF2;
}
.btn-white:hover {
    cursor: pointer;
}

.btn-gradient-primary {
    background: #7E3FF2;
    background: linear-gradient(120deg, #ffffff 0%, #7E3FF2 50%);
    color: white;
    border: 2px solid #7E3FF2;
}

.btn-secondary {
    background: #d3dfed;
    background: linear-gradient(120deg, rgba(211, 223, 237, 1) 0%, rgba(0, 132, 228, 1) 100%);
    color: white;
}

.btn-success {
    background: #a5b8a0;
    background: linear-gradient(120deg, rgba(165, 184, 160, 1) 0%, rgba(35, 153, 11, 1) 100%);
    color: white;
}


/* text stroke */

.text-stroke-primary {
    text-shadow: -2px -2px 0 #7E3FF2, 2px -2px 0 #7E3FF2, -2px 2px 0 #7E3FF2, 2px 2px 0 #7E3FF2, 0px -2px 0 #7E3FF2, 0px 2px 0 #7E3FF2, -2px 0px 0 #7E3FF2, 2px 0px 0 #7E3FF2;
}

.text-stroke-success {
    text-shadow: -2px -2px 0 #1F9F04, 2px -2px 0 #1F9F04, -2px 2px 0 #1F9F04, 2px 2px 0 #1F9F04, 0px -2px 0 #1F9F04, 0px 2px 0 #1F9F04, -2px 0px 0 #1F9F04, 2px 0px 0 #1F9F04;
}

.text-stroke-white {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
    color: #7E3FF2;
    text-align: center;
    vertical-align: text-top;
}


/* border */

.border-primary {
    border: 3px solid #7E3FF2;
}

.border-primary-light {
    border: 1px solid #7E3FF2;
}

.border-secondary {
    border: 2px solid #E4C9FE;
}

.border-secondary-light {
    border: 1px solid #E4C9FE;
}

.border-dark {
    border: 2px solid #1D2028
}

.border-dark-light {
    border: 1px solid #1D2028
}

/* ring */

.ring-primary:focus {
  --tw-ring-color: #7E3FF2;
}


/* shadow */

.shadow-primary {
  box-shadow: 0 4px 12px rgba(126, 63, 242, 0.25);
}

.shadow-primary-inset {
  box-shadow: inset 0 -70px 40px -20px rgba(126, 63, 242, 0.8);
}

.shadow-banner {
    box-shadow: rgba(126, 63, 242, 0.75) 0px 3px 10px;
}


/* referral badge */
.triangle-badge {
    position: relative;
    width: 4rem; 
    height: 3.25rem; 
    background-color: #7E3FF2; 
    border-top-left-radius: 0.375rem; 
    border-top-right-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem; 
    color: white;
}

.triangle-badge::after {
    content: "";
    position: absolute;
    bottom: -0.75rem;
    left: 0;
    width: 100%;
    height: 0;
    border-left: 2rem solid transparent;
    border-right: 2rem solid transparent;
    border-top: 0.75rem solid #7E3FF2;
}

/* rectangle login/register */
.rectangle-box {
background-color: #7E3FF2; 
    opacity: 0.4; 
    mask-image: linear-gradient(to bottom, transparent, black); 
    -webkit-mask-image: linear-gradient(to bottom, transparent, black);
}

/* sweet alert */
.swal2-confirm {
    background-color: #7E3FF2 !important;
    color: white !important;
}

/* pulse icon promosi */

@keyframes pulse-scale {
    0%,
    100% {
        transform: scale(.3);
    }
    50% {
        transform: scale(1);
    }
}

.animate-pulse-scale {
    animation: pulse-scale 1.5s ease-in-out infinite;
}

@keyframes pulse-scale-opacity {
    0%,
    100% {
        transform: scale(.3);
        opacity: 0%;
    }
    50% {
        transform: scale(1);
        opacity: 100%;
    }
}

.animate-pulse-scale-opacity {
    animation: pulse-scale-opacity 1.5s ease-in-out infinite;
}


/* marque */

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

.animate-marquee {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: marquee;
    will-change: transform;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fadeInDown 0.5s ease-out;
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-left {
    animation: fadeInLeft 0.5s ease-out;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px); 
    }
}

.bounce-icon {
    display: inline-block;
    animation: bounce 0.8s infinite ease-in-out;
}