/* ==========================================================
   PUSAT SABLON CUP
   MOBILE BOTTOM NAVIGATION
   ========================================================== */

:root {
    --psc-green: #087443;
    --psc-green-dark: #056037;
    --psc-green-soft: #eaf7f0;
    --psc-text: #17211c;
    --psc-muted: #7b8580;
    --psc-border: #e7ebe8;
}


/* ==========================================================
   MOBILE NAV
   ========================================================== */

.psc-mobile-bottom-nav {

    display: none;

}


/* ==========================================================
   MOBILE ONLY
   ========================================================== */

@media screen and (max-width: 767px) {

    .psc-mobile-bottom-nav {

        position: fixed;

        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));

        height: 64px;

        background: rgba(255,255,255,.97);

        border: 1px solid rgba(20,40,30,.08);

        border-radius: 18px;

        box-shadow:
            0 8px 30px rgba(0,0,0,.12),
            0 2px 8px rgba(0,0,0,.05);

        display: grid;

        grid-template-columns:
            repeat(5, 1fr);

        align-items: stretch;

        z-index: 99990;

        padding: 5px;

        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);

    }


    /* NAV ITEM */

    .psc-mobile-nav-item {

        position: relative;

        border: 0;

        background: transparent;

        text-decoration: none;

        color: #6f7873;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        min-width: 0;

        padding: 4px 2px;

        cursor: pointer;

        font-family: inherit;

        -webkit-tap-highlight-color: transparent;

    }


    .psc-mobile-nav-item:active {

        transform: scale(.94);

    }


    /* ICON */

    .psc-nav-icon {

        width: 25px;
        height: 25px;

        display: flex;

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

        position: relative;

    }


    .psc-nav-icon svg {

        width: 21px;
        height: 21px;

        fill: none;

        stroke: currentColor;

        stroke-width: 1.8;

        stroke-linecap: round;

        stroke-linejoin: round;

    }


    /* LABEL */

    .psc-nav-label {

        font-size: 9.5px;

        line-height: 1;

        font-weight: 600;

        white-space: nowrap;

    }


    /* ACTIVE */

    .psc-nav-home {

        color: var(--psc-green);

    }


    .psc-nav-home .psc-nav-icon {

        background: var(--psc-green-soft);

        border-radius: 10px;

        width: 36px;
        height: 31px;

    }


    .psc-nav-home .psc-nav-icon svg {

        width: 18px;
        height: 18px;

    }


    /* CHAT */

    .psc-nav-chat {

        appearance: none;
        -webkit-appearance: none;

    }


    /* CART BADGE */

    .psc-cart-count {

        position: absolute;

        top: -3px;
        right: -4px;

        min-width: 17px;
        height: 17px;

        padding: 0 4px;

        border-radius: 999px;

        background: #e92535;

        color: white;

        font-size: 9px;

        font-weight: 800;

        line-height: 17px;

        text-align: center;

        border: 2px solid white;

    }


    .psc-cart-count.is-empty {

        display: none;

    }


    /* ======================================================
       CHAT OVERLAY
       ====================================================== */

    .psc-chat-overlay {

        position: fixed;

        inset: 0;

        background: rgba(7,18,13,.54);

        z-index: 99998;

        opacity: 0;

        visibility: hidden;

        transition:
            opacity .25s ease,
            visibility .25s ease;

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);

    }


    .psc-chat-overlay.is-open {

        opacity: 1;

        visibility: visible;

    }


    /* ======================================================
       CHAT BOTTOM SHEET
       ====================================================== */

    .psc-chat-sheet {

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        height: min(82vh, 720px);

        background: #fff;

        border-radius: 24px 24px 0 0;

        z-index: 99999;

        transform: translateY(105%);

        transition:
            transform .35s cubic-bezier(.22,.8,.25,1);

        display: flex;

        flex-direction: column;

        overflow: hidden;

        box-shadow:
            0 -10px 45px rgba(0,0,0,.18);

        padding-bottom: env(safe-area-inset-bottom);

    }


    .psc-chat-sheet.is-open {

        transform: translateY(0);

    }


    /* HANDLE */

    .psc-chat-handle {

        width: 44px;

        height: 4px;

        background: #d6ddd9;

        border-radius: 99px;

        margin: 8px auto 4px;

        flex-shrink: 0;

    }


    /* ======================================================
       HEADER
       ====================================================== */

    .psc-chat-header {

        min-height: 62px;

        padding: 7px 12px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        border-bottom: 1px solid #edf0ee;

        flex-shrink: 0;

    }


    .psc-chat-brand {

        display: flex;

        align-items: center;

        gap: 9px;

        min-width: 0;

    }


    .psc-chat-brand-icon {

        width: 38px;
        height: 38px;

        border-radius: 12px;

        background: #fff0f1;

        color: #e6293d;

        display: flex;

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

        flex-shrink: 0;

    }


    .psc-chat-brand-icon svg {

        width: 21px;
        height: 21px;

        fill: currentColor;

    }


    .psc-chat-brand strong {

        display: block;

        color: #1c2721;

        font-size: 13px;

        line-height: 17px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        max-width: 145px;

    }


    .psc-chat-brand small {

        display: block;

        color: #8a938e;

        font-size: 10px;

        margin-top: 1px;

    }


    .psc-chat-actions {

        display: flex;

        align-items: center;

        gap: 6px;

    }


    .psc-chat-whatsapp {

        border: 0;

        background: #18b866;

        color: white;

        border-radius: 10px;

        height: 34px;

        padding: 0 11px;

        font-size: 10px;

        font-weight: 700;

        cursor: pointer;

    }


    .psc-chat-close {

        border: 0;

        background: #f0f2f1;

        color: #68726d;

        width: 34px;
        height: 34px;

        border-radius: 10px;

        font-size: 23px;

        line-height: 1;

        cursor: pointer;

    }


    /* ======================================================
       QUICK BUTTONS
       ====================================================== */

    .psc-chat-quick-wrap {

        display: flex;

        gap: 7px;

        overflow-x: auto;

        padding: 10px 12px;

        border-bottom: 1px solid #f0f2f1;

        scrollbar-width: none;

        flex-shrink: 0;

    }


    .psc-chat-quick-wrap::-webkit-scrollbar {

        display: none;

    }


    .psc-chat-quick {

        white-space: nowrap;

        border: 1px solid #e0e6e2;

        background: #fff;

        color: #3b4841;

        border-radius: 999px;

        padding: 8px 11px;

        font-size: 10px;

        font-weight: 600;

        cursor: pointer;

        flex-shrink: 0;

    }


    .psc-chat-quick:active {

        background: var(--psc-green-soft);

        border-color: #b9dfca;

    }


    /* ======================================================
       CHAT BODY
       ====================================================== */

    .psc-chat-body {

        flex: 1;

        overflow-y: auto;

        padding: 20px 18px;

        background:

            radial-gradient(
                #edf3ef 1px,
                transparent 1px
            );

        background-size: 15px 15px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

    }


    .psc-ai-icon {

        width: 52px;
        height: 52px;

        border-radius: 50%;

        background: #fff0f1;

        color: #e6293d;

        display: flex;

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

        margin-bottom: 12px;

    }


    .psc-ai-icon svg {

        width: 26px;
        height: 26px;

        fill: currentColor;

    }


    .psc-chat-body h3 {

        margin: 0;

        font-size: 14px;

        color: #26322c;

        font-weight: 700;

    }


    .psc-chat-body p {

        margin: 7px 0 0;

        color: #7c8680;

        font-size: 11px;

    }


    .psc-chat-description {

        max-width: 280px;

        line-height: 1.6;

    }


    /* USER MESSAGE */

    .psc-chat-message {

        align-self: flex-end;

        background: var(--psc-green);

        color: white;

        border-radius: 14px 14px 3px 14px;

        padding: 9px 12px;

        font-size: 11px;

        line-height: 1.45;

        max-width: 82%;

        margin-top: 10px;

        text-align: left;

    }


    /* ======================================================
       INPUT
       ====================================================== */

    .psc-chat-input-area {

        display: flex;

        align-items: center;

        gap: 7px;

        padding: 9px 11px;

        border-top: 1px solid #edf0ee;

        background: white;

        flex-shrink: 0;

    }


    .psc-chat-attachment {

        border: 0;

        background: transparent;

        font-size: 19px;

        width: 31px;

        height: 40px;

        padding: 0;

        cursor: pointer;

    }


    .psc-chat-input-area input {

        flex: 1;

        height: 40px;

        min-width: 0;

        border: 1px solid #dce2df;

        border-radius: 999px;

        padding: 0 13px;

        outline: none;

        font-size: 12px;

        color: #26322c;

        background: #fff;

    }


    .psc-chat-input-area input:focus {

        border-color: #8fc5a7;

        box-shadow: 0 0 0 3px rgba(8,116,67,.08);

    }


    .psc-chat-send {

        width: 40px;
        height: 40px;

        border: 0;

        border-radius: 50%;

        background: #e72c3d;

        color: white;

        display: flex;

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

        cursor: pointer;

        box-shadow: 0 4px 12px rgba(231,44,61,.25);

    }


    .psc-chat-send svg {

        width: 18px;
        height: 18px;

        fill: none;

        stroke: currentColor;

        stroke-width: 1.8;

        stroke-linecap: round;

        stroke-linejoin: round;

    }


    /* BODY WHEN CHAT OPEN */

    body.psc-chat-open {

        overflow: hidden;

    }


    /* ======================================================
       VERY SMALL SCREEN
       ====================================================== */

    @media screen and (max-width: 360px) {

        .psc-mobile-bottom-nav {

            left: 6px;
            right: 6px;

        }

        .psc-nav-label {

            font-size: 8.5px;

        }

        .psc-chat-brand strong {

            max-width: 120px;

        }

    }

}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media screen and (min-width: 768px) {

    .psc-mobile-bottom-nav,
    .psc-chat-overlay,
    .psc-chat-sheet {

        display: none !important;

    }

}