/* ==========================================================
   TECHNOED GLOBAL BUTTON EFFECT
   Inspired by supplied reference:
   - continuous diagonal shine sweep
   - smooth hover lift
   - subtle scale
   - click press feedback
   ========================================================== */


/*
|--------------------------------------------------------------------------
| BUTTON SELECTORS
|--------------------------------------------------------------------------
|
| We intentionally target:
| - native buttons
| - Bootstrap/Tailwind/custom .btn classes
| - links styled as buttons
| - role="button"
|
| Normal text/navigation links are NOT affected.
|
*/

:where(
    button,
    .btn,
    a.btn,
    a[class*="btn-"],
    a[class*="button"],
    [role="button"]
):not([disabled]):not(.no-button-effect) {

    position: relative;

    /*
     * Needed to keep the sweeping light inside button edges.
     * Existing border-radius is preserved.
     */
    overflow: hidden;

    isolation: isolate;

    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.28s ease,
        filter 0.28s ease,
        opacity 0.28s ease;

    will-change:
        transform,
        box-shadow;

    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   MOVING SHIMMER / LIGHT SWEEP
   ========================================================== */

:where(
    button,
    .btn,
    a.btn,
    a[class*="btn-"],
    a[class*="button"],
    [role="button"]
):not([disabled]):not(.no-button-effect)::after {

    content: "";

    position: absolute;

    top: -45%;
    bottom: -45%;

    left: -55%;

    width: 30%;

    pointer-events: none;

    z-index: 5;

    /*
     * Soft diagonal white shine like the reference video.
     */
    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.04) 18%,
            rgba(255,255,255,0.20) 45%,
            rgba(255,255,255,0.34) 52%,
            rgba(255,255,255,0.16) 62%,
            rgba(255,255,255,0) 100%
        );

    transform:
        skewX(-18deg)
        translateX(0);

    animation:
        technoedButtonShine 3.1s
        cubic-bezier(.4,0,.2,1)
        infinite;
}


/*
|--------------------------------------------------------------------------
| SHIMMER ANIMATION
|--------------------------------------------------------------------------
*/

@keyframes technoedButtonShine {

    0% {
        left: -55%;
    }

    38% {
        left: 130%;
    }

    100% {
        left: 130%;
    }

}


/* ==========================================================
   HOVER
   ========================================================== */

@media (hover: hover) {

    :where(
        button,
        .btn,
        a.btn,
        a[class*="btn-"],
        a[class*="button"],
        [role="button"]
    ):not([disabled]):not(.no-button-effect):hover {

        transform:
            translateY(-3px)
            scale(1.018);

        filter:
            brightness(1.06)
            saturate(1.05);

        box-shadow:
            0 9px 22px rgba(0,0,0,0.16),
            0 3px 8px rgba(0,0,0,0.10);
    }


    /*
     * Faster shine when hovered.
     */
    :where(
        button,
        .btn,
        a.btn,
        a[class*="btn-"],
        a[class*="button"],
        [role="button"]
    ):not([disabled]):not(.no-button-effect):hover::after {

        animation-duration: 1.25s;
    }

}


/* ==========================================================
   CLICK / ACTIVE
   ========================================================== */

:where(
    button,
    .btn,
    a.btn,
    a[class*="btn-"],
    a[class*="button"],
    [role="button"]
):not([disabled]):not(.no-button-effect):active {

    transform:
        translateY(1px)
        scale(0.975);

    transition-duration: 0.09s;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.16);

}


/* ==========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================== */

:where(
    button,
    .btn,
    a.btn,
    a[class*="btn-"],
    a[class*="button"],
    [role="button"]
):not([disabled]):not(.no-button-effect):focus-visible {

    outline: 3px solid rgba(59,130,246,0.40);

    outline-offset: 3px;
}


/* ==========================================================
   DISABLED BUTTONS
   ========================================================== */

:where(
    button,
    .btn,
    [role="button"]
)[disabled],

:where(
    button,
    .btn,
    [role="button"]
).disabled {

    cursor: not-allowed;

    transform: none !important;

    filter: none !important;
}


/* ==========================================================
   INPUT BUTTONS
   Inputs cannot reliably use ::after, so they receive
   hover/click transitions only.
   ========================================================== */

input[type="submit"],
input[type="button"],
input[type="reset"] {

    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.28s ease,
        filter 0.28s ease;

    -webkit-tap-highlight-color: transparent;
}


@media (hover: hover) {

    input[type="submit"]:not([disabled]):hover,
    input[type="button"]:not([disabled]):hover,
    input[type="reset"]:not([disabled]):hover {

        transform:
            translateY(-3px)
            scale(1.018);

        filter:
            brightness(1.06)
            saturate(1.05);

        box-shadow:
            0 9px 22px rgba(0,0,0,0.16),
            0 3px 8px rgba(0,0,0,0.10);
    }

}


input[type="submit"]:not([disabled]):active,
input[type="button"]:not([disabled]):active,
input[type="reset"]:not([disabled]):active {

    transform:
        translateY(1px)
        scale(0.975);
}


/* ==========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    :where(
        button,
        .btn,
        a.btn,
        a[class*="btn-"],
        a[class*="button"],
        [role="button"]
    )::after {

        animation: none !important;
    }


    :where(
        button,
        .btn,
        a.btn,
        a[class*="btn-"],
        a[class*="button"],
        [role="button"],
        input[type="submit"],
        input[type="button"],
        input[type="reset"]
    ) {

        transition-duration: 0.01ms !important;
    }

}


/* TECHNOED_STICKY_FOOTER_ALARM_START */

/* ==========================================================
   TECHNOED COURSE STICKY FOOTER CTA ALARM
   Exact target:
   .course-sticky-checkout__button

   Cycle:
   ~0.55 sec shake
   ~2.45 sec rest
   ========================================================== */

.te-sticky-footer-alarm-scope
.course-sticky-checkout__button {

    animation:
        technoedStickyFooterAlarm
        3s
        cubic-bezier(.36,.07,.19,.97)
        infinite;

    transform-origin: center center;

    will-change:
        translate,
        rotate;
}


@keyframes technoedStickyFooterAlarm {

    0% {
        translate: 0 0;
        rotate: 0deg;
    }

    2% {
        translate: -5px 0;
        rotate: -1.8deg;
    }

    4% {
        translate: 6px 0;
        rotate: 1.8deg;
    }

    6% {
        translate: -7px 0;
        rotate: -2deg;
    }

    8% {
        translate: 7px 0;
        rotate: 2deg;
    }

    10% {
        translate: -6px 0;
        rotate: -1.6deg;
    }

    12% {
        translate: 6px 0;
        rotate: 1.6deg;
    }

    14% {
        translate: -4px 0;
        rotate: -1deg;
    }

    16% {
        translate: 4px 0;
        rotate: 1deg;
    }

    18% {
        translate: -2px 0;
        rotate: -.4deg;
    }

    20%,
    100% {
        translate: 0 0;
        rotate: 0deg;
    }
}


/* Pause shake when user interacts with CTA */

.te-sticky-footer-alarm-scope
.course-sticky-checkout__button:hover,

.te-sticky-footer-alarm-scope
.course-sticky-checkout__button:active,

.te-sticky-footer-alarm-scope
.course-sticky-checkout__button:focus-visible {

    animation-play-state: paused;

    translate: 0 0;
    rotate: 0deg;
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .te-sticky-footer-alarm-scope
    .course-sticky-checkout__button {

        animation: none !important;

        translate: 0 0 !important;
        rotate: 0deg !important;
    }

}

/* TECHNOED_STICKY_FOOTER_ALARM_END */

/* TECHNOED_CHECKOUT_POLISH_START */


/* ==========================================================
   MAIN CHECKOUT CARD
   ========================================================== */

.te-checkout-main-box {

    border-radius: 15px !important;

}


/* ==========================================================
   PHONEPE PAYMENT BUTTON
   ========================================================== */

.te-phonepe-pay-button {

    background: #5F259F !important;
    background-color: #5F259F !important;

    border-color: #5F259F !important;

    color: #ffffff !important;

    box-shadow:
        0 8px 20px rgba(95,37,159,.28) !important;
}


.te-phonepe-pay-button:hover,
.te-phonepe-pay-button:focus-visible {

    background: #5F259F !important;
    background-color: #5F259F !important;

    border-color: #5F259F !important;

    color: #ffffff !important;

    box-shadow:
        0 11px 27px rgba(95,37,159,.38) !important;
}


.te-phonepe-pay-button:active {

    background: #5F259F !important;
    background-color: #5F259F !important;

    border-color: #5F259F !important;

    color: #ffffff !important;
}


/* TECHNOED_CHECKOUT_POLISH_END */

/* TECHNOED_DARK_PARROT_BUTTONS_START */

/*
|--------------------------------------------------------------------------
| TECHNOED PRIMARY ACTION BUTTON COLOR
|--------------------------------------------------------------------------
|
| Main website primary/green actions:
| Dark Parrot Green
|
*/

:root {
    --te-parrot-green: #49B82E;
    --te-parrot-green-hover: #3B9825;
    --te-parrot-green-active: #347F22;
    --te-parrot-green-shadow: rgba(73, 184, 46, .28);
}


/*
|--------------------------------------------------------------------------
| BOOTSTRAP PRIMARY + SUCCESS BUTTONS
|--------------------------------------------------------------------------
*/

.btn-primary,
.btn-success {

    --bs-btn-color: #ffffff !important;

    --bs-btn-bg:
        var(--te-parrot-green) !important;

    --bs-btn-border-color:
        var(--te-parrot-green) !important;

    --bs-btn-hover-color:
        #ffffff !important;

    --bs-btn-hover-bg:
        var(--te-parrot-green-hover) !important;

    --bs-btn-hover-border-color:
        var(--te-parrot-green-hover) !important;

    --bs-btn-active-color:
        #ffffff !important;

    --bs-btn-active-bg:
        var(--te-parrot-green-active) !important;

    --bs-btn-active-border-color:
        var(--te-parrot-green-active) !important;

    --bs-btn-disabled-color:
        #ffffff !important;

    --bs-btn-disabled-bg:
        var(--te-parrot-green) !important;

    --bs-btn-disabled-border-color:
        var(--te-parrot-green) !important;


    background-color:
        var(--te-parrot-green) !important;

    border-color:
        var(--te-parrot-green) !important;

    color:
        #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| HOVER
|--------------------------------------------------------------------------
*/

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {

    background-color:
        var(--te-parrot-green-hover) !important;

    border-color:
        var(--te-parrot-green-hover) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 8px 22px
        var(--te-parrot-green-shadow) !important;
}


/*
|--------------------------------------------------------------------------
| ACTIVE / CLICK
|--------------------------------------------------------------------------
*/

.btn-primary:active,
.btn-primary.active,
.btn-success:active,
.btn-success.active {

    background-color:
        var(--te-parrot-green-active) !important;

    border-color:
        var(--te-parrot-green-active) !important;

    color:
        #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| OUTLINE PRIMARY / SUCCESS
|--------------------------------------------------------------------------
*/

.btn-outline-primary,
.btn-outline-success {

    color:
        var(--te-parrot-green) !important;

    border-color:
        var(--te-parrot-green) !important;
}


.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-success:hover,
.btn-outline-success:focus {

    background-color:
        var(--te-parrot-green) !important;

    border-color:
        var(--te-parrot-green) !important;

    color:
        #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| TECHNOED COURSE CTA
|--------------------------------------------------------------------------
*/

.course-sticky-checkout__button {

    background-color:
        var(--te-parrot-green) !important;

    border-color:
        var(--te-parrot-green) !important;

    color:
        #ffffff !important;
}


.course-sticky-checkout__button:hover,
.course-sticky-checkout__button:focus {

    background-color:
        var(--te-parrot-green-hover) !important;

    border-color:
        var(--te-parrot-green-hover) !important;
}


/*
|--------------------------------------------------------------------------
| ACCESSIBILITY
|--------------------------------------------------------------------------
*/

.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-outline-primary:focus-visible,
.btn-outline-success:focus-visible,
.course-sticky-checkout__button:focus-visible {

    outline:
        3px solid
        rgba(73, 184, 46, .35) !important;

    outline-offset:
        2px;
}

/* TECHNOED_DARK_PARROT_BUTTONS_END */

/* TECHNOED_EXCL_GST_LABEL_START */

.te-excl-gst-label {
    display: inline-block;
    margin-left: 4px;
    color: #64748b;
    font-size: .78em;
    font-weight: 600;
    white-space: nowrap;
}

/* TECHNOED_EXCL_GST_LABEL_END */