/*
|--------------------------------------------------------------------------
| Chu Chu Loyalty Kiosk
|--------------------------------------------------------------------------
*/

:root {
    --chu-green: #7f9d22;
    --chu-green-dark: #637d15;
    --chu-lime: #aacb38;
    --chu-light-green: #edf2d3;

    --chu-pink: #efa1ba;
    --chu-pink-soft: #fff0f5;

    --chu-black: #25252d;
    --chu-gray: #686872;
    --chu-cream: #fbfaf6;
    --chu-white: #ffffff;

    --shadow:
        0 24px 70px rgba(50, 56, 34, 0.12);

    --shadow-soft:
        0 12px 35px rgba(50, 56, 34, 0.08);
}


/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}


html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        #faf9f5;
}


body {
    font-family:
        Inter,
        ui-rounded,
        "SF Pro Display",
        "Segoe UI",
        Arial,
        sans-serif;

    color:
        var(--chu-black);

    user-select: none;
    -webkit-user-select: none;
}


button,
input {
    font: inherit;
}


button {
    touch-action: manipulation;
}


#loyalty-tablet-root {
    width: 100%;
    height: 100%;
}


/*
|--------------------------------------------------------------------------
| Main App
|--------------------------------------------------------------------------
*/

.chu-app {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 100dvh;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 88% 16%,
            rgba(255, 230, 238, 0.8) 0,
            rgba(255, 230, 238, 0) 25%
        ),

        radial-gradient(
            circle at 12% 72%,
            rgba(239, 244, 216, 0.6) 0,
            rgba(239, 244, 216, 0) 28%
        ),

        linear-gradient(
            180deg,
            #fbfaf6 0%,
            #ffffff 72%,
            #f1f5d7 100%
        );
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.kiosk-header {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 20;

    width: 100%;

    padding:
        clamp(18px, 3vh, 36px)
        clamp(28px, 5vw, 70px);
}


.brand {
    display: flex;
    align-items: center;

    gap: 18px;
}


.logo-shell {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        clamp(72px, 8vw, 108px);

    height:
        clamp(72px, 8vw, 108px);

    padding: 7px;

    overflow: hidden;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.11);
}


.logo-shell img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;
}


.brand-divider {
    width: 1px;
    height: 38px;

    background:
        rgba(120, 120, 120, 0.2);
}


.rewards-label {
    display: flex;
    align-items: center;

    gap: 11px;

    color:
        var(--chu-green-dark);

    font-size:
        clamp(16px, 1.7vw, 25px);

    font-weight: 900;

    letter-spacing: 0.13em;
}


.rewards-dot {
    width: 15px;
    height: 15px;

    border-radius: 50%;

    background:
        var(--chu-lime);
}


/*
|--------------------------------------------------------------------------
| Main Screen
|--------------------------------------------------------------------------
*/

.kiosk-screen {
    position: relative;

    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding:
        clamp(110px, 14vh, 155px)
        clamp(40px, 8vw, 120px)
        clamp(55px, 7vh, 90px);
}


/*
|--------------------------------------------------------------------------
| Main Card
|--------------------------------------------------------------------------
*/

.kiosk-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width:
        min(
            82vw,
            1180px
        );

    min-height:
        min(
            70vh,
            730px
        );

    padding:
        clamp(35px, 4.5vh, 70px)
        clamp(40px, 6vw, 95px);

    text-align: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.8);

    border-radius:
        clamp(30px, 3vw, 48px);

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/*
|--------------------------------------------------------------------------
| Phone Icon
|--------------------------------------------------------------------------
*/

.phone-icon-wrapper {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width:
        clamp(115px, 12vw, 165px);

    height:
        clamp(115px, 12vw, 165px);

    margin-bottom:
        clamp(14px, 2vh, 25px);

    border-radius: 50%;

    background:
        #e9efca;
}


.phone-icon {
    position: relative;

    width: 46px;
    height: 76px;

    border:
        6px solid
        #292936;

    border-radius: 7px;

    background:
        transparent;
}


.phone-screen {
    position: absolute;

    top: 7px;
    left: 5px;
    right: 5px;
    bottom: 11px;

    border-radius: 2px;

    background:
        rgba(255, 255, 255, 0.75);
}


.phone-home {
    position: absolute;

    width: 13px;
    height: 3px;

    bottom: 3px;
    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 999px;

    background:
        #292936;
}


.phone-dot {
    position: absolute;

    display: block;

    border-radius: 50%;
}


.phone-dot-green {
    width: 25px;
    height: 25px;

    left: -5px;
    bottom: 22px;

    background:
        var(--chu-lime);
}


.phone-dot-pink {
    width: 32px;
    height: 32px;

    top: 0;
    right: 3px;

    background:
        #f3a9bd;
}


/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.eyebrow {
    color:
        var(--chu-green-dark);

    font-size:
        clamp(17px, 1.8vw, 25px);

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin:
        clamp(13px, 1.7vh, 22px)
        0
        8px;

    color:
        var(--chu-black);

    font-size:
        clamp(54px, 6.5vw, 100px);

    line-height: 0.93;

    font-weight: 950;

    letter-spacing:
        -0.055em;
}


.hero-line {
    display: block;
}


.green-text {
    color:
        var(--chu-green);
}


.hero-description {
    margin:
        clamp(15px, 2vh, 24px)
        0
        0;

    color:
        #36363e;

    font-size:
        clamp(22px, 2.4vw, 37px);

    line-height: 1.22;

    font-weight: 500;
}


/*
|--------------------------------------------------------------------------
| Pink Underline
|--------------------------------------------------------------------------
*/

.pink-underline {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        min(
            55%,
            490px
        );

    gap: 10px;

    margin-top: 10px;
}


.underline-line {
    flex: 1;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--chu-pink)
        );
}


.underline-line:last-child {
    background:
        linear-gradient(
            90deg,
            var(--chu-pink),
            transparent
        );
}


.underline-heart {
    color:
        var(--chu-pink);

    font-size: 32px;
}


/*
|--------------------------------------------------------------------------
| Waiting Pill
|--------------------------------------------------------------------------
*/

.waiting-pill {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    min-width:
        min(
            65%,
            540px
        );

    margin-top:
        clamp(25px, 3.2vh, 40px);

    padding:
        clamp(15px, 1.8vh, 22px)
        clamp(25px, 4vw, 55px);

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #edf3d4,
            #f5f6df
        );

    color:
        #35353b;

    font-size:
        clamp(18px, 1.8vw, 27px);

    font-weight: 800;
}


.status-dot {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--chu-lime);

    box-shadow:
        0 0 0 7px
        rgba(170, 203, 56, 0.12);

    animation:
        waitingPulse
        1.8s
        ease-in-out
        infinite;
}


@keyframes waitingPulse {

    0%,
    100% {
        transform:
            scale(1);

        opacity:
            1;
    }

    50% {
        transform:
            scale(0.82);

        opacity:
            0.65;
    }
}


/*
|--------------------------------------------------------------------------
| Receipt Active Screen
|--------------------------------------------------------------------------
*/

.receipt-card {
    width:
        min(
            78vw,
            1050px
        );

    padding-top:
        clamp(38px, 4vh, 60px);

    padding-bottom:
        clamp(35px, 4vh, 55px);
}


.reward-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        clamp(90px, 9vw, 125px);

    height:
        clamp(90px, 9vw, 125px);

    margin-bottom: 18px;

    border-radius: 50%;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            var(--chu-lime),
            var(--chu-green)
        );

    box-shadow:
        0 15px 35px
        rgba(127, 157, 34, 0.22);

    animation:
        rewardPop
        0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.reward-icon span {
    font-size:
        clamp(40px, 4vw, 60px);
}


@keyframes rewardPop {

    from {
        opacity: 0;

        transform:
            scale(0.55)
            rotate(-15deg);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);
    }
}


.receipt-title {
    margin:
        10px
        0
        8px;

    font-size:
        clamp(48px, 5.5vw, 82px);

    line-height: 0.98;

    letter-spacing:
        -0.055em;

    font-weight: 950;
}


.receipt-description {
    margin:
        10px
        0
        22px;

    color:
        var(--chu-gray);

    font-size:
        clamp(18px, 1.8vw, 27px);

    line-height: 1.35;
}


/*
|--------------------------------------------------------------------------
| Purchase Summary
|--------------------------------------------------------------------------
*/

.purchase-summary {
    width:
        min(
            82%,
            620px
        );

    margin:
        8px
        auto
        22px;

    padding:
        clamp(18px, 2.3vh, 28px)
        25px;

    border:
        2px solid
        rgba(127, 157, 34, 0.13);

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #f7fae9,
            #fffdf8
        );
}


.summary-label {
    margin-bottom: 3px;

    color:
        var(--chu-green-dark);

    font-size:
        clamp(13px, 1.3vw, 18px);

    font-weight: 900;

    letter-spacing:
        0.13em;
}


.purchase-amount {
    color:
        var(--chu-black);

    font-size:
        clamp(39px, 4.3vw, 65px);

    line-height: 1.05;

    font-weight: 950;

    letter-spacing:
        -0.045em;
}


.points-preview {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 8px;

    color:
        var(--chu-green-dark);

    font-size:
        clamp(17px, 1.6vw, 23px);

    font-weight: 650;
}


.tiny-star {
    color:
        var(--chu-lime);
}


/*
|--------------------------------------------------------------------------
| Claim Button
|--------------------------------------------------------------------------
*/

.claim-form {
    display: block;

    width:
        min(
            82%,
            620px
        );
}


.claim-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    gap: 12px;

    min-height:
        clamp(65px, 7vh, 86px);

    padding:
        16px
        35px;

    cursor: pointer;

    border: none;

    border-radius: 22px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #91af26,
            #6e8d17
        );

    box-shadow:
        0 14px 30px
        rgba(111, 141, 23, 0.25);

    font-size:
        clamp(19px, 2vw, 28px);

    font-weight: 950;

    letter-spacing:
        0.035em;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.claim-button:active {
    transform:
        scale(0.98);

    box-shadow:
        0 7px 18px
        rgba(111, 141, 23, 0.25);
}


.claim-button:disabled {
    cursor: default;

    opacity: 0.65;
}


.claim-button-icon {
    font-size: 25px;

    color:
        #ffd8e4;
}


/*
|--------------------------------------------------------------------------
| Skip Button
|--------------------------------------------------------------------------
*/

.skip-button {
    margin-top: 13px;

    padding:
        13px
        25px;

    cursor: pointer;

    border: none;

    background: transparent;

    color:
        #85858c;

    font-size:
        clamp(16px, 1.5vw, 21px);

    font-weight: 700;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(133, 133, 140, 0.32);

    text-underline-offset:
        5px;
}


.skip-button:active {
    transform:
        scale(0.98);
}


/*
|--------------------------------------------------------------------------
| Close Button
|--------------------------------------------------------------------------
*/

.close-button {
    position: absolute;

    top:
        clamp(22px, 2.5vw, 36px);

    right:
        clamp(22px, 2.5vw, 36px);

    display: flex;
    align-items: center;
    justify-content: center;

    width:
        clamp(52px, 5vw, 68px);

    height:
        clamp(52px, 5vw, 68px);

    padding: 0;

    cursor: pointer;

    border:
        2px solid
        #f5d3df;

    border-radius: 50%;

    background:
        #fff3f7;

    color:
        #d77b99;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(32px, 3vw, 43px);

    font-weight: 400;

    line-height: 1;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}


.close-button:active {
    transform:
        scale(0.92);

    background:
        #ffe8f0;
}


/*
|--------------------------------------------------------------------------
| Countdown
|--------------------------------------------------------------------------
*/

.countdown {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top:
        clamp(11px, 1.4vh, 18px);

    padding:
        8px
        16px;

    border-radius: 999px;

    background:
        #f7f7f4;

    color:
        #85858c;

    font-size:
        clamp(13px, 1.2vw, 17px);
}


.countdown-time {
    min-width: 48px;

    color:
        var(--chu-green-dark);

    font-weight: 900;
}


.countdown-warning {
    background:
        #fff0f3;

    color:
        #bd6e87;
}


.countdown-warning
.countdown-time {
    color:
        #c34f73;
}


.receipt-number {
    margin-top: 8px;

    color:
        #aaaab0;

    font-size:
        clamp(11px, 1vw, 14px);
}


/*
|--------------------------------------------------------------------------
| Background Decorations
|--------------------------------------------------------------------------
*/

.decor {
    position: absolute;

    pointer-events: none;

    z-index: 2;
}


.decor-heart {
    top: 18%;
    right: 6%;

    color:
        var(--chu-pink);

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(50px, 6vw, 85px);

    line-height: 1;

    transform:
        rotate(-8deg);

    opacity: 0.9;
}


.decor-spark-left {
    top: 50%;
    left: 13%;

    width: 65px;
    height: 65px;
}


.decor-spark-left span,
.decor-spark-right span {
    position: absolute;

    display: block;

    width: 8px;
    height: 27px;

    border-radius: 999px;

    background:
        var(--chu-pink);
}


.decor-spark-left span:nth-child(1) {
    left: 0;
    top: 25px;

    transform:
        rotate(-65deg);
}


.decor-spark-left span:nth-child(2) {
    left: 25px;
    top: 2px;

    transform:
        rotate(-10deg);
}


.decor-spark-left span:nth-child(3) {
    right: 0;
    top: 25px;

    transform:
        rotate(50deg);
}


.decor-spark-right {
    right: 14%;
    bottom: 19%;

    width: 65px;
    height: 65px;
}


.decor-spark-right span:nth-child(1) {
    left: 0;
    top: 25px;

    transform:
        rotate(-65deg);
}


.decor-spark-right span:nth-child(2) {
    left: 26px;
    top: 3px;

    transform:
        rotate(-10deg);
}


.decor-spark-right span:nth-child(3) {
    right: 0;
    top: 25px;

    transform:
        rotate(50deg);
}


.dots-left {
    left: 3.5%;
    bottom: 21%;

    width: 60px;
    height: 90px;

    opacity: 0.35;

    background-image:
        radial-gradient(
            circle,
            #f1a8bf 4px,
            transparent 5px
        );

    background-size:
        22px 22px;
}


/*
|--------------------------------------------------------------------------
| Leaves
|--------------------------------------------------------------------------
*/

.leaf-left {
    left: -12px;
    top: 36%;

    width: 130px;
    height: 190px;

    border-left:
        6px solid
        #dde7b9;

    transform:
        rotate(-22deg);

    opacity: 0.65;
}


.leaf-left span {
    position: absolute;

    width: 60px;
    height: 31px;

    border:
        6px solid
        #dde7b9;

    border-radius:
        100% 0 100% 0;
}


.leaf-left span:nth-child(1) {
    top: 22px;
    left: 2px;

    transform:
        rotate(-28deg);
}


.leaf-left span:nth-child(2) {
    top: 76px;
    left: 14px;

    transform:
        rotate(30deg);
}


.leaf-left span:nth-child(3) {
    top: 128px;
    left: -5px;

    transform:
        rotate(-25deg);
}


.leaf-right {
    right: -12px;
    bottom: -10px;

    width: 220px;
    height: 250px;

    border-left:
        8px solid
        #84a320;

    transform:
        rotate(-48deg);

    opacity: 0.96;
}


.leaf-right span {
    position: absolute;

    width: 80px;
    height: 42px;

    border:
        8px solid
        #84a320;

    border-radius:
        100% 0 100% 0;
}


.leaf-right span:nth-child(1) {
    top: 15px;
    left: -2px;

    transform:
        rotate(-35deg);
}


.leaf-right span:nth-child(2) {
    top: 80px;
    left: 12px;

    transform:
        rotate(30deg);
}


.leaf-right span:nth-child(3) {
    top: 143px;
    left: -4px;

    transform:
        rotate(-33deg);
}


.leaf-right span:nth-child(4) {
    top: 188px;
    left: 20px;

    transform:
        rotate(35deg);
}


/*
|--------------------------------------------------------------------------
| Bottom Green Wave
|--------------------------------------------------------------------------
*/

.bottom-green-wave {
    position: absolute;

    z-index: 1;

    left: -5%;
    bottom: -13%;

    width: 110%;
    height: 25%;

    border-radius: 50% 50% 0 0;

    background:
        #e7edbe;

    transform:
        rotate(1.2deg);
}


/*
|--------------------------------------------------------------------------
| Tablet Landscape
|--------------------------------------------------------------------------
*/

@media (
    orientation: landscape
) {

    .kiosk-card {
        max-height:
            calc(
                100vh - 190px
            );
    }

}


/*
|--------------------------------------------------------------------------
| Smaller Tablet
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1000px
) {

    .kiosk-screen {
        padding:
            100px
            45px
            48px;
    }


    .kiosk-card {
        width:
            88vw;

        min-height:
            68vh;
    }


    .hero-title {
        font-size:
            clamp(
                50px,
                7vw,
                76px
            );
    }


    .decor-spark-left {
        left: 7%;
    }


    .decor-spark-right {
        right: 8%;
    }

}


/*
|--------------------------------------------------------------------------
| Very Short Landscape Screen
|--------------------------------------------------------------------------
*/

@media (
    max-height: 650px
)
and (
    orientation: landscape
) {

    .kiosk-header {
        padding-top: 12px;
    }


    .logo-shell {
        width: 65px;
        height: 65px;
    }


    .brand-divider {
        height: 30px;
    }


    .kiosk-screen {
        padding:
            82px
            60px
            30px;
    }


    .kiosk-card {
        width:
            min(
                78vw,
                950px
            );

        min-height:
            calc(
                100vh - 125px
            );

        padding:
            22px
            55px;

        border-radius: 30px;
    }


    .phone-icon-wrapper {
        width: 86px;
        height: 86px;

        margin-bottom: 8px;
    }


    .phone-icon {
        width: 32px;
        height: 53px;

        border-width: 4px;
    }


    .phone-dot-green {
        width: 17px;
        height: 17px;
    }


    .phone-dot-pink {
        width: 21px;
        height: 21px;
    }


    .eyebrow {
        font-size: 14px;
    }


    .hero-title {
        margin-top: 7px;

        font-size:
            clamp(
                43px,
                5.7vw,
                65px
            );
    }


    .hero-description {
        margin-top: 10px;

        font-size:
            clamp(
                18px,
                2vw,
                25px
            );
    }


    .pink-underline {
        margin-top: 2px;
    }


    .waiting-pill {
        margin-top: 16px;

        padding:
            12px
            30px;

        font-size:
            17px;
    }


    /*
    | Receipt
    */

    .receipt-card {
        padding:
            18px
            55px;
    }


    .reward-icon {
        width: 70px;
        height: 70px;

        margin-bottom: 7px;
    }


    .reward-icon span {
        font-size: 34px;
    }


    .receipt-title {
        margin:
            5px
            0;

        font-size:
            clamp(
                42px,
                4.8vw,
                60px
            );
    }


    .receipt-description {
        margin:
            5px
            0
            10px;

        font-size: 17px;
    }


    .purchase-summary {
        margin:
            3px
            auto
            10px;

        padding:
            10px
            20px;
    }


    .purchase-amount {
        font-size:
            clamp(
                34px,
                3.6vw,
                46px
            );
    }


    .points-preview {
        margin-top: 2px;

        font-size: 16px;
    }


    .claim-button {
        min-height: 55px;

        padding:
            10px
            25px;

        border-radius: 17px;

        font-size: 18px;
    }


    .skip-button {
        margin-top: 3px;

        padding:
            8px
            20px;

        font-size: 14px;
    }


    .countdown {
        margin-top: 3px;

        padding:
            5px
            12px;

        font-size: 12px;
    }


    .receipt-number {
        margin-top: 3px;

        font-size: 10px;
    }

}


/*
|--------------------------------------------------------------------------
| Portrait Fallback
|--------------------------------------------------------------------------
*/

@media (
    orientation: portrait
) {

    .kiosk-screen {
        padding:
            130px
            25px
            50px;
    }


    .kiosk-card {
        width: 91vw;

        min-height: 68vh;

        padding:
            45px
            27px;
    }


    .hero-title {
        font-size:
            clamp(
                52px,
                11vw,
                82px
            );
    }


    .hero-description {
        font-size:
            clamp(
                22px,
                4.5vw,
                33px
            );
    }


    .waiting-pill {
        width: 92%;
    }


    .receipt-card {
        width: 92vw;
    }


    .purchase-summary,
    .claim-form {
        width: 92%;
    }

}