/* ==========================================================
   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 */