/* =========================================================
   GUARUS DELIVERY
   ÁREA DO CLIENTE

   CAMINHO:
   public/customer/style.css

   RESPONSABILIDADES:
   - Login
   - Cadastro
   - Login com Google
   - Painel do cliente
   - Resumo de pedidos
   - Lista de pedidos
   - Rastreamento em tempo real
   - Mapa
   - Modal
   - Toasts
   - Navegação mobile
   - Responsividade
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {

    --gd-primary: #f50000;

    --gd-primary-dark: #d90000;

    --gd-primary-deep: #b80000;

    --gd-primary-soft: #fff1f1;

    --gd-primary-soft-2: #ffe5e5;


    --gd-black: #101114;

    --gd-dark: #1a1b20;

    --gd-gray-900: #202126;

    --gd-gray-800: #303238;

    --gd-gray-700: #4a4d55;

    --gd-gray-600: #62656e;

    --gd-gray-500: #7a7e88;

    --gd-gray-400: #9da1aa;

    --gd-gray-300: #c7cad0;

    --gd-gray-200: #e6e8ec;

    --gd-gray-150: #eceef1;

    --gd-gray-100: #f3f4f6;

    --gd-gray-50: #f8f9fb;

    --gd-white: #ffffff;


    --gd-green: #16a34a;

    --gd-green-soft: #ecfdf3;


    --gd-orange: #f59e0b;

    --gd-orange-soft: #fff7e6;


    --gd-blue: #2563eb;

    --gd-blue-soft: #eff6ff;


    --gd-purple: #7c3aed;

    --gd-purple-soft: #f5f3ff;


    --gd-danger: #dc2626;

    --gd-danger-soft: #fff1f2;


    --gd-shadow-xs:
        0 2px 6px rgba(
            15,
            23,
            42,
            0.04
        );


    --gd-shadow-sm:
        0 6px 18px rgba(
            15,
            23,
            42,
            0.07
        );


    --gd-shadow-md:
        0 12px 34px rgba(
            15,
            23,
            42,
            0.10
        );


    --gd-shadow-lg:
        0 24px 70px rgba(
            15,
            23,
            42,
            0.16
        );


    --gd-radius-sm: 10px;

    --gd-radius-md: 14px;

    --gd-radius-lg: 18px;

    --gd-radius-xl: 24px;

    --gd-radius-2xl: 30px;


    --gd-container: 1180px;


    --gd-transition:
        180ms ease;
}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;
}


html {

    scroll-behavior:
        smooth;
}


body {

    min-height:
        100vh;

    background:
        var(
            --gd-gray-50
        );

    color:
        var(
            --gd-black
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


body.customer-modal-open {

    overflow:
        hidden;
}


button,
input,
textarea,
select {

    font:
        inherit;
}


button {

    border:
        0;

    cursor:
        pointer;
}


a {

    color:
        inherit;

    text-decoration:
        none;
}


img {

    display:
        block;

    max-width:
        100%;
}


.hidden {

    display:
        none !important;
}


/* =========================================================
   LOADING GLOBAL
========================================================= */

.customer-loading {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(
            248,
            249,
            251,
            0.98
        );
}


.customer-loading-card {

    width:
        min(
            100%,
            320px
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        14px;

    padding:
        30px 24px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        var(
            --gd-radius-xl
        );

    background:
        var(
            --gd-white
        );

    box-shadow:
        var(
            --gd-shadow-md
        );

    text-align:
        center;
}


.customer-loading-logo {

    width:
        62px;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            var(
                --gd-primary
            ),
            var(
                --gd-primary-dark
            )
        );

    color:
        var(
            --gd-white
        );

    font-size:
        1.15rem;

    font-weight:
        900;

    letter-spacing:
        -0.04em;

    box-shadow:
        0 12px 24px
        rgba(
            245,
            0,
            0,
            0.24
        );
}


.customer-loading-spinner,
.customer-orders-loading-spinner,
.customer-button-spinner {

    border-radius:
        50%;

    border:
        3px solid
        var(
            --gd-gray-200
        );

    border-top-color:
        var(
            --gd-primary
        );

    animation:
        customerSpin
        0.8s
        linear
        infinite;
}


.customer-loading-spinner {

    width:
        30px;

    height:
        30px;
}


.customer-loading-card strong {

    font-size:
        0.98rem;
}


.customer-loading-card span {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.78rem;

    line-height:
        1.45;
}


@keyframes customerSpin {

    to {

        transform:
            rotate(
                360deg
            );
    }
}


/* =========================================================
   AUTENTICAÇÃO
========================================================= */

.customer-auth-page {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        36px 20px;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(
                245,
                0,
                0,
                0.10
            ),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 90%,
            rgba(
                245,
                0,
                0,
                0.06
            ),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f6f7f9
        );
}


.customer-auth-shell {

    width:
        min(
            100%,
            470px
        );
}


/* =========================================================
   MARCA LOGIN
========================================================= */

.customer-auth-brand {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        24px;
}


.customer-auth-brand-logo {

    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            var(
                --gd-primary
            ),
            var(
                --gd-primary-dark
            )
        );

    color:
        var(
            --gd-white
        );

    font-size:
        1rem;

    font-weight:
        900;

    box-shadow:
        0 10px 24px
        rgba(
            245,
            0,
            0,
            0.22
        );
}


.customer-auth-brand-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.customer-auth-brand-text strong {

    color:
        var(
            --gd-black
        );

    font-size:
        1rem;

    font-weight:
        900;
}


.customer-auth-brand-text span {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.72rem;
}


/* =========================================================
   CARD AUTENTICAÇÃO
========================================================= */

.customer-auth-card {

    padding:
        30px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        var(
            --gd-radius-2xl
        );

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

    box-shadow:
        var(
            --gd-shadow-lg
        );

    backdrop-filter:
        blur(
            20px
        );
}


.customer-auth-heading {

    margin-bottom:
        22px;

    text-align:
        center;
}


.customer-auth-kicker {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        25px;

    margin-bottom:
        10px;

    padding:
        0 10px;

    border-radius:
        999px;

    background:
        var(
            --gd-primary-soft
        );

    color:
        var(
            --gd-primary
        );

    font-size:
        0.60rem;

    font-weight:
        900;

    letter-spacing:
        0.10em;
}


.customer-auth-heading h1 {

    color:
        var(
            --gd-black
        );

    font-size:
        clamp(
            1.5rem,
            5vw,
            2rem
        );

    font-weight:
        950;

    line-height:
        1.08;

    letter-spacing:
        -0.04em;
}


.customer-auth-heading p {

    max-width:
        370px;

    margin:
        12px auto 0;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.82rem;

    line-height:
        1.55;
}


/* =========================================================
   GOOGLE
========================================================= */

.customer-google-button {

    width:
        100%;

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0 16px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        var(
            --gd-radius-md
        );

    background:
        var(
            --gd-white
        );

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.84rem;

    font-weight:
        850;

    box-shadow:
        var(
            --gd-shadow-xs
        );

    transition:
        transform
        var(
            --gd-transition
        ),
        background
        var(
            --gd-transition
        ),
        border
        var(
            --gd-transition
        );
}


.customer-google-button:hover {

    transform:
        translateY(
            -1px
        );

    background:
        var(
            --gd-gray-50
        );

    border-color:
        var(
            --gd-gray-300
        );
}


.customer-google-button:active {

    transform:
        translateY(
            0
        );
}


.customer-google-button:disabled {

    opacity:
        0.58;

    cursor:
        not-allowed;

    transform:
        none;
}


.customer-google-icon {

    width:
        22px;

    height:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;
}


/* =========================================================
   DIVISOR
========================================================= */

.customer-auth-divider {

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        12px;

    margin:
        20px 0;
}


.customer-auth-divider > span {

    height:
        1px;

    background:
        var(
            --gd-gray-200
        );
}


.customer-auth-divider small {

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.68rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}


/* =========================================================
   ABAS LOGIN / CADASTRO
========================================================= */

.customer-auth-tabs {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        5px;

    margin-bottom:
        22px;

    padding:
        5px;

    border-radius:
        15px;

    background:
        var(
            --gd-gray-100
        );
}


.customer-auth-tab {

    min-height:
        42px;

    padding:
        0 12px;

    border-radius:
        11px;

    background:
        transparent;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.78rem;

    font-weight:
        850;

    transition:
        all
        var(
            --gd-transition
        );
}


.customer-auth-tab.active {

    background:
        var(
            --gd-white
        );

    color:
        var(
            --gd-black
        );

    box-shadow:
        0 4px 12px
        rgba(
            15,
            23,
            42,
            0.07
        );
}


/* =========================================================
   FORMULÁRIOS
========================================================= */

.customer-auth-panel {

    width:
        100%;
}


.customer-auth-panel form {

    display:
        grid;

    gap:
        16px;
}


.customer-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.customer-field label {

    padding-left:
        2px;

    color:
        var(
            --gd-gray-800
        );

    font-size:
        0.72rem;

    font-weight:
        850;
}


.customer-input-shell {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        50px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        var(
            --gd-radius-md
        );

    background:
        var(
            --gd-gray-50
        );

    transition:
        border
        var(
            --gd-transition
        ),
        box-shadow
        var(
            --gd-transition
        ),
        background
        var(
            --gd-transition
        );
}


.customer-input-shell:focus-within {

    border-color:
        rgba(
            245,
            0,
            0,
            0.55
        );

    background:
        var(
            --gd-white
        );

    box-shadow:
        0 0 0 4px
        rgba(
            245,
            0,
            0,
            0.08
        );
}


.customer-input-shell.has-error {

    border-color:
        var(
            --gd-danger
        );

    background:
        var(
            --gd-danger-soft
        );
}


.customer-input-icon {

    width:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.92rem;
}


.customer-input-shell input {

    width:
        100%;

    min-width:
        0;

    height:
        48px;

    padding:
        0 12px 0 0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(
            --gd-black
        );

    font-size:
        0.83rem;

    font-weight:
        650;
}


.customer-input-shell input::placeholder {

    color:
        var(
            --gd-gray-400
        );

    font-weight:
        500;
}


.customer-password-toggle {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    background:
        transparent;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.95rem;
}


.customer-password-help {

    display:
        block;

    padding-left:
        2px;

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.65rem;

    line-height:
        1.4;
}


.customer-field-error {

    min-height:
        13px;

    padding-left:
        2px;

    color:
        var(
            --gd-danger
        );

    font-size:
        0.63rem;

    font-weight:
        700;

    line-height:
        1.35;
}


/* =========================================================
   BOTÃO PRINCIPAL
========================================================= */

.customer-primary-button {

    width:
        100%;

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        3px;

    padding:
        0 18px;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            var(
                --gd-primary
            ),
            var(
                --gd-primary-dark
            )
        );

    color:
        var(
            --gd-white
        );

    font-size:
        0.84rem;

    font-weight:
        900;

    box-shadow:
        0 10px 22px
        rgba(
            245,
            0,
            0,
            0.23
        );

    transition:
        transform
        var(
            --gd-transition
        ),
        box-shadow
        var(
            --gd-transition
        );
}


.customer-primary-button:hover {

    transform:
        translateY(
            -1px
        );

    box-shadow:
        0 14px 28px
        rgba(
            245,
            0,
            0,
            0.28
        );
}


.customer-primary-button:active {

    transform:
        translateY(
            0
        );
}


.customer-primary-button:disabled {

    opacity:
        0.62;

    cursor:
        not-allowed;

    transform:
        none;
}


.customer-button-spinner {

    width:
        18px;

    height:
        18px;

    border-width:
        2px;

    border-color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    border-top-color:
        var(
            --gd-white
        );
}


/* =========================================================
   CONVITES LOGIN / CADASTRO
========================================================= */

.customer-register-invite {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        18px;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.72rem;
}


.customer-register-invite button {

    padding:
        4px 5px;

    background:
        transparent;

    color:
        var(
            --gd-primary
        );

    font-size:
        0.72rem;

    font-weight:
        900;
}


.customer-auth-footer {

    margin-top:
        24px;

    padding-top:
        18px;

    border-top:
        1px solid
        var(
            --gd-gray-150
        );

    text-align:
        center;
}


.customer-auth-footer a {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.72rem;

    font-weight:
        750;
}


/* =========================================================
   APP
========================================================= */

.customer-app {

    min-height:
        100vh;

    padding-bottom:
        30px;
}


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

.customer-header {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    border-bottom:
        1px solid
        rgba(
            230,
            232,
            236,
            0.95
        );

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

    backdrop-filter:
        blur(
            18px
        );
}


.customer-header-inner {

    width:
        min(
            calc(
                100% - 32px
            ),
            var(
                --gd-container
            )
        );

    min-height:
        72px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


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

.customer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.customer-brand-logo {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            var(
                --gd-primary
            ),
            var(
                --gd-primary-dark
            )
        );

    color:
        var(
            --gd-white
        );

    font-size:
        0.82rem;

    font-weight:
        950;

    box-shadow:
        0 8px 18px
        rgba(
            245,
            0,
            0,
            0.20
        );
}


.customer-brand-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;
}


.customer-brand-copy strong {

    font-size:
        0.88rem;

    font-weight:
        950;
}


.customer-brand-copy span {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.64rem;
}


/* =========================================================
   AÇÕES HEADER
========================================================= */

.customer-header-actions {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.customer-marketplace-button {

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 14px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        13px;

    background:
        var(
            --gd-white
        );

    color:
        var(
            --gd-gray-800
        );

    font-size:
        0.72rem;

    font-weight:
        850;
}


.customer-profile-button {

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        5px 9px 5px 5px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        15px;

    background:
        var(
            --gd-white
        );

    color:
        var(
            --gd-gray-900
        );

    box-shadow:
        var(
            --gd-shadow-xs
        );
}


.customer-avatar {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    flex:
        0 0 auto;

    border-radius:
        11px;

    background:
        var(
            --gd-primary-soft
        );

    color:
        var(
            --gd-primary
        );

    font-size:
        0.72rem;

    font-weight:
        950;
}


.customer-profile-copy {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        1px;
}


.customer-profile-copy strong {

    max-width:
        120px;

    overflow:
        hidden;

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.69rem;

    font-weight:
        900;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.customer-profile-copy span {

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.58rem;
}


.customer-profile-chevron {

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.68rem;
}


/* =========================================================
   MENU PERFIL
========================================================= */

.customer-profile-menu {

    position:
        absolute;

    top:
        calc(
            100% + 9px
        );

    right:
        0;

    z-index:
        200;

    width:
        250px;

    padding:
        8px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        17px;

    background:
        var(
            --gd-white
        );

    box-shadow:
        var(
            --gd-shadow-md
        );
}


.customer-profile-menu-header {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    padding:
        11px 11px 13px;

    border-bottom:
        1px solid
        var(
            --gd-gray-150
        );
}


.customer-profile-menu-header strong {

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.76rem;

    font-weight:
        900;
}


.customer-profile-menu-header span {

    overflow:
        hidden;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.65rem;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.customer-profile-menu-item {

    width:
        100%;

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        6px;

    padding:
        0 11px;

    border-radius:
        11px;

    background:
        transparent;

    color:
        var(
            --gd-gray-800
        );

    font-size:
        0.72rem;

    font-weight:
        750;

    text-align:
        left;
}


.customer-profile-menu-item:hover {

    background:
        var(
            --gd-gray-50
        );
}


.customer-profile-menu-item.danger {

    color:
        var(
            --gd-danger
        );
}


/* =========================================================
   CONTEÚDO
========================================================= */

.customer-main {

    width:
        min(
            calc(
                100% - 32px
            ),
            var(
                --gd-container
            )
        );

    margin:
        0 auto;

    padding:
        28px 0 50px;
}


/* =========================================================
   BOAS VINDAS
========================================================= */

.customer-welcome {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        22px;
}


.customer-section-kicker {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(
            --gd-primary
        );

    font-size:
        0.58rem;

    font-weight:
        950;

    letter-spacing:
        0.10em;
}


.customer-welcome h1 {

    font-size:
        clamp(
            1.5rem,
            4vw,
            2.2rem
        );

    font-weight:
        950;

    letter-spacing:
        -0.04em;

    line-height:
        1.05;
}


.customer-welcome p {

    margin-top:
        7px;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.78rem;
}


/* =========================================================
   RESUMO
========================================================= */

.customer-summary-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;

    margin-bottom:
        28px;
}


.customer-summary-card {

    min-height:
        96px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        18px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        var(
            --gd-radius-lg
        );

    background:
        var(
            --gd-white
        );

    box-shadow:
        var(
            --gd-shadow-xs
        );
}


.customer-summary-icon {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    border-radius:
        15px;

    background:
        var(
            --gd-primary-soft
        );

    font-size:
        1.1rem;
}


.customer-summary-card > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.customer-summary-card span {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.67rem;

    font-weight:
        700;
}


.customer-summary-card strong {

    color:
        var(
            --gd-black
        );

    font-size:
        1.38rem;

    font-weight:
        950;
}


/* =========================================================
   CABEÇALHOS DE SEÇÕES
========================================================= */

.customer-section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        15px;
}


.customer-section-heading h2 {

    font-size:
        1.18rem;

    font-weight:
        950;

    letter-spacing:
        -0.025em;
}


/* =========================================================
   INDICADOR AO VIVO
========================================================= */

.customer-live-indicator {

    min-height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(
            22,
            163,
            74,
            0.15
        );

    border-radius:
        999px;

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

    color:
        var(
            --gd-green
        );

    font-size:
        0.57rem;

    font-weight:
        950;

    letter-spacing:
        0.08em;
}


.customer-live-indicator > span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        currentColor;

    box-shadow:
        0 0 0 0
        rgba(
            22,
            163,
            74,
            0.4
        );

    animation:
        customerPulse
        1.8s
        infinite;
}


@keyframes customerPulse {

    70% {

        box-shadow:
            0 0 0 7px
            rgba(
                22,
                163,
                74,
                0
            );
    }

    100% {

        box-shadow:
            0 0 0 0
            rgba(
                22,
                163,
                74,
                0
            );
    }
}


/* =========================================================
   RASTREAMENTO
========================================================= */

.customer-live-order-section {

    margin-bottom:
        30px;
}


.customer-live-card {

    overflow:
        hidden;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        var(
            --gd-radius-xl
        );

    background:
        var(
            --gd-white
        );

    box-shadow:
        var(
            --gd-shadow-sm
        );
}


.customer-live-card-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        18px 20px;

    border-bottom:
        1px solid
        var(
            --gd-gray-150
        );
}


.customer-live-card-header > div:first-child {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        0;
}


.customer-live-status-icon {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    border-radius:
        15px;

    background:
        var(
            --gd-primary-soft
        );

    font-size:
        1.2rem;
}


.customer-live-status-kicker {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(
            --gd-primary
        );

    font-size:
        0.56rem;

    font-weight:
        950;

    letter-spacing:
        0.08em;
}


.customer-live-status-title {

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.96rem;

    font-weight:
        950;

    line-height:
        1.25;
}


.customer-live-status-description {

    margin-top:
        3px;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.68rem;

    line-height:
        1.4;
}


.customer-live-status-badge {

    min-height:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    padding:
        0 11px;

    border-radius:
        999px;

    background:
        var(
            --gd-primary-soft
        );

    color:
        var(
            --gd-primary
        );

    font-size:
        0.62rem;

    font-weight:
        900;
}


/* =========================================================
   MAPA
========================================================= */

.customer-tracking-map-wrapper {

    position:
        relative;

    min-height:
        360px;

    background:
        #eceff2;
}


.customer-tracking-map {

    width:
        100%;

    height:
        360px;

    background:
        #e7eaee;
}


.customer-tracking-map-loading,
.customer-tracking-map-unavailable {

    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        25px;

    background:
        rgba(
            246,
            247,
            249,
            0.92
        );

    text-align:
        center;

    backdrop-filter:
        blur(
            3px
        );
}


.customer-tracking-map-loading span {

    color:
        var(
            --gd-gray-600
        );

    font-size:
        0.72rem;

    font-weight:
        700;
}


.customer-tracking-map-unavailable > span {

    font-size:
        1.7rem;
}


.customer-tracking-map-unavailable strong {

    color:
        var(
            --gd-gray-800
        );

    font-size:
        0.82rem;
}


.customer-tracking-map-unavailable p {

    max-width:
        330px;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.69rem;

    line-height:
        1.5;
}


/* =========================================================
   MÉTRICAS TRACKING
========================================================= */

.customer-tracking-metrics {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    border-bottom:
        1px solid
        var(
            --gd-gray-150
        );
}


.customer-tracking-metric {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        15px 18px;

    border-right:
        1px solid
        var(
            --gd-gray-150
        );
}


.customer-tracking-metric:last-child {

    border-right:
        0;
}


.customer-tracking-metric span {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.62rem;
}


.customer-tracking-metric strong {

    overflow:
        hidden;

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.78rem;

    font-weight:
        900;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.customer-tracking-update {

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0 18px;

    border-bottom:
        1px solid
        var(
            --gd-gray-150
        );

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.62rem;
}


.customer-tracking-update-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(
            --gd-green
        );
}


/* =========================================================
   FOOTER LIVE
========================================================= */

.customer-live-order-footer {

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        12px 18px;
}


.customer-live-order-footer > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.customer-live-order-footer span {

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.58rem;
}


.customer-live-order-footer strong {

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.76rem;

    font-weight:
        900;
}


.customer-live-details-button {

    min-height:
        36px;

    padding:
        0 13px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        11px;

    background:
        var(
            --gd-white
        );

    color:
        var(
            --gd-gray-800
        );

    font-size:
        0.65rem;

    font-weight:
        850;
}


/* =========================================================
   PEDIDOS
========================================================= */

.customer-orders-section {

    padding-bottom:
        30px;
}


.customer-orders-heading {

    margin-bottom:
        13px;
}


/* =========================================================
   ABAS DOS PEDIDOS
========================================================= */

.customer-orders-tabs {

    display:
        flex;

    gap:
        8px;

    margin-bottom:
        15px;

    overflow-x:
        auto;

    scrollbar-width:
        none;
}


.customer-orders-tabs::-webkit-scrollbar {

    display:
        none;
}


.customer-orders-tab {

    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    flex:
        0 0 auto;

    padding:
        0 13px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        12px;

    background:
        var(
            --gd-white
        );

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.68rem;

    font-weight:
        850;

    transition:
        all
        var(
            --gd-transition
        );
}


.customer-orders-tab span {

    min-width:
        20px;

    min-height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 5px;

    border-radius:
        999px;

    background:
        var(
            --gd-gray-100
        );

    font-size:
        0.57rem;
}


.customer-orders-tab.active {

    border-color:
        var(
            --gd-primary
        );

    background:
        var(
            --gd-primary
        );

    color:
        var(
            --gd-white
        );

    box-shadow:
        0 7px 16px
        rgba(
            245,
            0,
            0,
            0.18
        );
}


.customer-orders-tab.active span {

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

    color:
        var(
            --gd-white
        );
}


/* =========================================================
   LISTA PEDIDOS
========================================================= */

.customer-orders-list {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;
}


.customer-order-card {

    overflow:
        hidden;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        var(
            --gd-radius-lg
        );

    background:
        var(
            --gd-white
        );

    box-shadow:
        var(
            --gd-shadow-xs
        );

    transition:
        transform
        var(
            --gd-transition
        ),
        box-shadow
        var(
            --gd-transition
        );
}


.customer-order-card:hover {

    transform:
        translateY(
            -2px
        );

    box-shadow:
        var(
            --gd-shadow-sm
        );
}


/* =========================================================
   HEADER CARD PEDIDO
========================================================= */

.customer-order-card-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        15px;
}


.customer-order-store {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;
}


.customer-order-store-logo {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    flex:
        0 0 auto;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        13px;

    background:
        var(
            --gd-gray-50
        );

    color:
        var(
            --gd-primary
        );

    font-size:
        0.66rem;

    font-weight:
        950;
}


.customer-order-store-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.customer-order-store > div:last-child {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.customer-order-store-name {

    overflow:
        hidden;

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.76rem;

    font-weight:
        900;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.customer-order-number {

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.58rem;
}


.customer-order-status {

    min-height:
        27px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    padding:
        0 9px;

    border-radius:
        999px;

    background:
        var(
            --gd-primary-soft
        );

    color:
        var(
            --gd-primary
        );

    font-size:
        0.58rem;

    font-weight:
        900;
}


.customer-order-status[data-status="delivered"],
.customer-order-status[data-status="completed"] {

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

    color:
        var(
            --gd-green
        );
}


.customer-order-status[data-status="cancelled"],
.customer-order-status[data-status="canceled"] {

    background:
        var(
            --gd-danger-soft
        );

    color:
        var(
            --gd-danger
        );
}


/* =========================================================
   PROGRESSO
========================================================= */

.customer-order-progress {

    padding:
        0 15px 15px;
}


.customer-order-progress-track {

    height:
        6px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(
            --gd-gray-100
        );
}


.customer-order-progress-fill {

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(
                --gd-primary
            ),
            #ff4a4a
        );

    transition:
        width
        350ms
        ease;
}


.customer-order-progress-text {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        7px;
}


.customer-order-progress-text span {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.59rem;
}


.customer-order-progress-text strong {

    color:
        var(
            --gd-gray-800
        );

    font-size:
        0.58rem;
}


/* =========================================================
   PRÉVIA
========================================================= */

.customer-order-preview {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    border-top:
        1px solid
        var(
            --gd-gray-150
        );

    border-bottom:
        1px solid
        var(
            --gd-gray-150
        );
}


.customer-order-preview > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    padding:
        12px 15px;
}


.customer-order-preview > div:first-child {

    border-right:
        1px solid
        var(
            --gd-gray-150
        );
}


.customer-order-preview span {

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.56rem;
}


.customer-order-preview strong {

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.72rem;

    font-weight:
        900;
}


/* =========================================================
   AÇÕES CARD PEDIDO
========================================================= */

.customer-order-card-actions {

    display:
        flex;

    gap:
        8px;

    padding:
        11px 15px 14px;
}


.customer-order-details-button,
.customer-order-store-button {

    min-height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 12px;

    border-radius:
        10px;

    font-size:
        0.62rem;

    font-weight:
        850;
}


.customer-order-details-button {

    flex:
        1;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    background:
        var(
            --gd-white
        );

    color:
        var(
            --gd-gray-800
        );
}


.customer-order-store-button {

    flex:
        1;

    background:
        var(
            --gd-primary
        );

    color:
        var(
            --gd-white
        );
}


/* =========================================================
   LOADING PEDIDOS
========================================================= */

.customer-orders-loading {

    min-height:
        220px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        30px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        var(
            --gd-radius-lg
        );

    background:
        var(
            --gd-white
        );

    text-align:
        center;
}


.customer-orders-loading-spinner {

    width:
        26px;

    height:
        26px;

    margin-bottom:
        4px;
}


.customer-orders-loading strong {

    color:
        var(
            --gd-gray-800
        );

    font-size:
        0.78rem;
}


.customer-orders-loading span {

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.66rem;
}


/* =========================================================
   ERRO PEDIDOS
========================================================= */

.customer-orders-message {

    min-height:
        100px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        12px;

    padding:
        16px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        var(
            --gd-radius-lg
        );

    background:
        var(
            --gd-white
        );
}


.customer-orders-message.error {

    border-color:
        rgba(
            220,
            38,
            38,
            0.15
        );

    background:
        var(
            --gd-danger-soft
        );
}


.customer-orders-message-icon {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(
            --gd-danger
        );

    color:
        var(
            --gd-white
        );

    font-weight:
        950;
}


.customer-orders-message strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.75rem;
}


.customer-orders-message p {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.64rem;

    line-height:
        1.4;
}


.customer-orders-message button {

    min-height:
        36px;

    padding:
        0 11px;

    border-radius:
        10px;

    background:
        var(
            --gd-danger
        );

    color:
        var(
            --gd-white
        );

    font-size:
        0.62rem;

    font-weight:
        850;
}


/* =========================================================
   VAZIO
========================================================= */

.customer-orders-empty {

    min-height:
        270px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    border:
        1px dashed
        var(
            --gd-gray-300
        );

    border-radius:
        var(
            --gd-radius-xl
        );

    background:
        var(
            --gd-white
        );

    text-align:
        center;
}


.customer-orders-empty-icon {

    width:
        60px;

    height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        13px;

    border-radius:
        18px;

    background:
        var(
            --gd-primary-soft
        );

    font-size:
        1.45rem;
}


.customer-orders-empty h3 {

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.92rem;

    font-weight:
        950;
}


.customer-orders-empty p {

    max-width:
        330px;

    margin-top:
        6px;

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.69rem;

    line-height:
        1.5;
}


.customer-orders-empty a {

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        15px;

    padding:
        0 15px;

    border-radius:
        11px;

    background:
        var(
            --gd-primary
        );

    color:
        var(
            --gd-white
        );

    font-size:
        0.65rem;

    font-weight:
        850;
}


/* =========================================================
   MODAL
========================================================= */

.customer-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        3000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        18px;
}


.customer-modal-backdrop {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background:
        rgba(
            12,
            13,
            16,
            0.62
        );

    backdrop-filter:
        blur(
            5px
        );
}


.customer-modal-panel {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            100%,
            650px
        );

    max-height:
        min(
            88vh,
            780px
        );

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

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

    border-radius:
        var(
            --gd-radius-xl
        );

    background:
        var(
            --gd-white
        );

    box-shadow:
        var(
            --gd-shadow-lg
        );
}


.customer-modal-header {

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        15px 18px;

    border-bottom:
        1px solid
        var(
            --gd-gray-150
        );
}


.customer-modal-header h2 {

    font-size:
        1rem;

    font-weight:
        950;
}


.customer-modal-close {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    border-radius:
        12px;

    background:
        var(
            --gd-gray-100
        );

    color:
        var(
            --gd-gray-700
        );

    font-size:
        1.35rem;
}


.customer-modal-content {

    overflow-y:
        auto;

    padding:
        18px;
}


/* =========================================================
   DETALHES DO PEDIDO
========================================================= */

.customer-order-detail-section {

    padding:
        16px 0;

    border-bottom:
        1px solid
        var(
            --gd-gray-150
        );
}


.customer-order-detail-section:first-child {

    padding-top:
        0;
}


.customer-order-detail-section:last-child {

    border-bottom:
        0;
}


.customer-order-detail-title {

    margin-bottom:
        11px;

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.76rem;

    font-weight:
        950;
}


.customer-order-detail-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        9px;
}


.customer-order-detail-box {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        12px;

    border:
        1px solid
        var(
            --gd-gray-150
        );

    border-radius:
        12px;

    background:
        var(
            --gd-gray-50
        );
}


.customer-order-detail-box span {

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.58rem;
}


.customer-order-detail-box strong {

    color:
        var(
            --gd-gray-800
        );

    font-size:
        0.70rem;

    line-height:
        1.45;
}


/* =========================================================
   ITENS MODAL
========================================================= */

.customer-order-items {

    display:
        grid;

    gap:
        8px;
}


.customer-order-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        11px 12px;

    border:
        1px solid
        var(
            --gd-gray-150
        );

    border-radius:
        12px;

    background:
        var(
            --gd-gray-50
        );
}


.customer-order-item-info {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.customer-order-item-info strong {

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.69rem;
}


.customer-order-item-info span {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.60rem;

    line-height:
        1.4;
}


.customer-order-item-price {

    flex:
        0 0 auto;

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.67rem;

    font-weight:
        900;
}


.customer-order-detail-total {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        10px;

    padding:
        12px;

    border-radius:
        12px;

    background:
        var(
            --gd-primary-soft
        );
}


.customer-order-detail-total span {

    color:
        var(
            --gd-gray-600
        );

    font-size:
        0.66rem;
}


.customer-order-detail-total strong {

    color:
        var(
            --gd-primary
        );

    font-size:
        0.86rem;

    font-weight:
        950;
}


/* =========================================================
   TIMELINE
========================================================= */

.customer-status-timeline {

    display:
        grid;

    gap:
        0;
}


.customer-status-step {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        32px
        1fr;

    gap:
        10px;

    min-height:
        55px;
}


.customer-status-step:not(:last-child)::before {

    content:
        "";

    position:
        absolute;

    top:
        27px;

    left:
        15px;

    bottom:
        -3px;

    width:
        2px;

    background:
        var(
            --gd-gray-200
        );
}


.customer-status-step.done:not(:last-child)::before {

    background:
        var(
            --gd-green
        );
}


.customer-status-step-marker {

    position:
        relative;

    z-index:
        2;

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        var(
            --gd-gray-200
        );

    border-radius:
        50%;

    background:
        var(
            --gd-white
        );

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.58rem;

    font-weight:
        900;
}


.customer-status-step.done
.customer-status-step-marker {

    border-color:
        var(
            --gd-green
        );

    background:
        var(
            --gd-green
        );

    color:
        var(
            --gd-white
        );
}


.customer-status-step.active
.customer-status-step-marker {

    border-color:
        var(
            --gd-primary
        );

    background:
        var(
            --gd-primary
        );

    color:
        var(
            --gd-white
        );

    box-shadow:
        0 0 0 5px
        rgba(
            245,
            0,
            0,
            0.10
        );
}


.customer-status-step-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    padding-top:
        3px;
}


.customer-status-step-content strong {

    color:
        var(
            --gd-gray-800
        );

    font-size:
        0.66rem;
}


.customer-status-step-content span {

    color:
        var(
            --gd-gray-400
        );

    font-size:
        0.58rem;

    line-height:
        1.4;
}


/* =========================================================
   NAVEGAÇÃO MOBILE
========================================================= */

.customer-mobile-nav {

    display:
        none;
}


/* =========================================================
   TOAST
========================================================= */

.customer-toast-container {

    position:
        fixed;

    top:
        18px;

    right:
        18px;

    z-index:
        5000;

    width:
        min(
            calc(
                100vw - 36px
            ),
            360px
        );

    display:
        grid;

    gap:
        9px;
}


.customer-toast {

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px;

    border:
        1px solid
        var(
            --gd-gray-200
        );

    border-radius:
        15px;

    background:
        var(
            --gd-white
        );

    box-shadow:
        var(
            --gd-shadow-md
        );

    animation:
        customerToastIn
        220ms
        ease;
}


@keyframes customerToastIn {

    from {

        opacity:
            0;

        transform:
            translateY(
                -8px
            );
    }

    to {

        opacity:
            1;

        transform:
            translateY(
                0
            );
    }
}


.customer-toast-icon {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        var(
            --gd-gray-100
        );

    color:
        var(
            --gd-gray-700
        );

    font-size:
        0.72rem;

    font-weight:
        950;
}


.customer-toast.success
.customer-toast-icon {

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

    color:
        var(
            --gd-green
        );
}


.customer-toast.error
.customer-toast-icon {

    background:
        var(
            --gd-danger-soft
        );

    color:
        var(
            --gd-danger
        );
}


.customer-toast.warning
.customer-toast-icon {

    background:
        var(
            --gd-orange-soft
        );

    color:
        var(
            --gd-orange
        );
}


.customer-toast-copy {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.customer-toast-copy strong {

    color:
        var(
            --gd-gray-900
        );

    font-size:
        0.70rem;

    font-weight:
        900;
}


.customer-toast-copy span {

    color:
        var(
            --gd-gray-500
        );

    font-size:
        0.62rem;

    line-height:
        1.4;
}


.customer-toast-close {

    width:
        28px;

    height:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        transparent;

    color:
        var(
            --gd-gray-400
        );

    font-size:
        1rem;
}


/* =========================================================
   NOSCRIPT
========================================================= */

.customer-noscript {

    position:
        fixed;

    inset:
        auto
        15px
        15px;

    z-index:
        99999;

    padding:
        13px 16px;

    border-radius:
        13px;

    background:
        var(
            --gd-danger
        );

    color:
        var(
            --gd-white
        );

    font-size:
        0.72rem;

    text-align:
        center;
}


/* =========================================================
   TABLET
========================================================= */

@media (
    max-width:
    900px
) {

    .customer-summary-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            10px;
    }


    .customer-summary-card {

        min-height:
            88px;

        padding:
            14px;
    }


    .customer-summary-icon {

        width:
            40px;

        height:
            40px;
    }


    .customer-orders-list {

        grid-template-columns:
            1fr;
    }
}


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

@media (
    max-width:
    680px
) {

    body {

        padding-bottom:
            72px;
    }


    /* =====================================================
       LOGIN MOBILE
    ===================================================== */

    .customer-auth-page {

        align-items:
            flex-start;

        padding:
            22px 14px 34px;
    }


    .customer-auth-brand {

        justify-content:
            flex-start;

        margin-bottom:
            18px;

        padding-left:
            4px;
    }


    .customer-auth-brand-logo {

        width:
            46px;

        height:
            46px;

        border-radius:
            14px;
    }


    .customer-auth-card {

        padding:
            22px 17px;

        border-radius:
            22px;
    }


    .customer-auth-heading {

        margin-bottom:
            19px;
    }


    .customer-auth-heading h1 {

        font-size:
            1.55rem;
    }


    .customer-auth-heading p {

        font-size:
            0.75rem;
    }


    .customer-google-button {

        min-height:
            50px;

        border-radius:
            13px;
    }


    .customer-auth-tabs {

        margin-bottom:
            18px;
    }


    .customer-field {

        gap:
            6px;
    }


    .customer-input-shell {

        min-height:
            50px;

        border-radius:
            13px;
    }


    .customer-input-shell input {

        height:
            48px;
    }


    .customer-primary-button {

        min-height:
            50px;

        border-radius:
            13px;
    }


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

    .customer-header-inner {

        width:
            calc(
                100% - 20px
            );

        min-height:
            62px;
    }


    .customer-brand-logo {

        width:
            38px;

        height:
            38px;

        border-radius:
            12px;
    }


    .customer-brand-copy strong {

        font-size:
            0.75rem;
    }


    .customer-brand-copy span {

        font-size:
            0.56rem;
    }


    .customer-marketplace-button {

        width:
            40px;

        min-height:
            40px;

        padding:
            0;
    }


    .customer-marketplace-button-text {

        display:
            none;
    }


    .customer-profile-button {

        width:
            40px;

        min-height:
            40px;

        padding:
            3px;

        justify-content:
            center;
    }


    .customer-profile-copy,
    .customer-profile-chevron {

        display:
            none;
    }


    .customer-avatar {

        width:
            32px;

        height:
            32px;
    }


    .customer-profile-menu {

        position:
            fixed;

        top:
            70px;

        right:
            10px;

        width:
            min(
                calc(
                    100vw - 20px
                ),
                300px
            );
    }


    /* =====================================================
       CONTEÚDO MOBILE
    ===================================================== */

    .customer-main {

        width:
            calc(
                100% - 20px
            );

        padding:
            20px 0 35px;
    }


    .customer-welcome {

        margin-bottom:
            17px;
    }


    .customer-welcome h1 {

        font-size:
            1.48rem;
    }


    .customer-welcome p {

        font-size:
            0.70rem;
    }


    /* =====================================================
       RESUMO MOBILE
    ===================================================== */

    .customer-summary-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            7px;

        margin-bottom:
            22px;
    }


    .customer-summary-card {

        min-height:
            86px;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            space-between;

        gap:
            8px;

        padding:
            11px;

        border-radius:
            15px;
    }


    .customer-summary-icon {

        width:
            31px;

        height:
            31px;

        border-radius:
            10px;

        font-size:
            0.85rem;
    }


    .customer-summary-card > div {

        width:
            100%;
    }


    .customer-summary-card span {

        font-size:
            0.53rem;
    }


    .customer-summary-card strong {

        font-size:
            1.02rem;
    }


    /* =====================================================
       SEÇÕES MOBILE
    ===================================================== */

    .customer-section-heading {

        align-items:
            center;

        margin-bottom:
            12px;
    }


    .customer-section-heading h2 {

        font-size:
            1rem;
    }


    .customer-live-indicator {

        min-height:
            25px;

        padding:
            0 8px;

        font-size:
            0.50rem;
    }


    /* =====================================================
       LIVE MOBILE
    ===================================================== */

    .customer-live-card {

        border-radius:
            18px;
    }


    .customer-live-card-header {

        align-items:
            flex-start;

        padding:
            14px;
    }


    .customer-live-card-header > div:first-child {

        gap:
            9px;
    }


    .customer-live-status-icon {

        width:
            38px;

        height:
            38px;

        border-radius:
            12px;

        font-size:
            1rem;
    }


    .customer-live-status-title {

        font-size:
            0.79rem;
    }


    .customer-live-status-description {

        font-size:
            0.60rem;
    }


    .customer-live-status-badge {

        min-height:
            25px;

        padding:
            0 8px;

        font-size:
            0.51rem;
    }


    .customer-tracking-map-wrapper {

        min-height:
            290px;
    }


    .customer-tracking-map {

        height:
            290px;
    }


    .customer-tracking-metrics {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .customer-tracking-metric {

        padding:
            11px 9px;

        text-align:
            center;
    }


    .customer-tracking-metric span {

        font-size:
            0.51rem;
    }


    .customer-tracking-metric strong {

        font-size:
            0.61rem;
    }


    .customer-tracking-update {

        min-height:
            36px;

        padding:
            0 12px;

        font-size:
            0.55rem;
    }


    .customer-live-order-footer {

        min-height:
            58px;

        padding:
            10px 13px;
    }


    /* =====================================================
       PEDIDOS MOBILE
    ===================================================== */

    .customer-orders-tabs {

        margin-bottom:
            12px;
    }


    .customer-orders-tab {

        min-height:
            36px;

        font-size:
            0.60rem;
    }


    .customer-orders-list {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .customer-order-card {

        border-radius:
            16px;
    }


    .customer-order-card-header {

        padding:
            12px;
    }


    .customer-order-store-logo {

        width:
            38px;

        height:
            38px;

        border-radius:
            12px;
    }


    .customer-order-store-name {

        font-size:
            0.68rem;
    }


    .customer-order-status {

        min-height:
            25px;

        padding:
            0 7px;

        font-size:
            0.50rem;
    }


    .customer-order-progress {

        padding:
            0 12px 12px;
    }


    .customer-order-preview > div {

        padding:
            10px 12px;
    }


    .customer-order-card-actions {

        padding:
            10px 12px 12px;
    }


    .customer-order-details-button,
    .customer-order-store-button {

        min-height:
            34px;

        font-size:
            0.56rem;
    }


    /* =====================================================
       ERRO MOBILE
    ===================================================== */

    .customer-orders-message {

        grid-template-columns:
            auto
            1fr;

        gap:
            10px;
    }


    .customer-orders-message button {

        grid-column:
            1 /
            -1;

        width:
            100%;
    }


    /* =====================================================
       MODAL MOBILE
    ===================================================== */

    .customer-modal {

        align-items:
            flex-end;

        padding:
            0;
    }


    .customer-modal-panel {

        width:
            100%;

        max-height:
            90vh;

        border-radius:
            22px
            22px
            0
            0;
    }


    .customer-modal-header {

        min-height:
            64px;

        padding:
            13px 15px;
    }


    .customer-modal-content {

        padding:
            15px;
    }


    .customer-order-detail-grid {

        grid-template-columns:
            1fr;
    }


    .customer-order-item {

        align-items:
            flex-start;
    }


    /* =====================================================
       TOAST MOBILE
    ===================================================== */

    .customer-toast-container {

        top:
            10px;

        right:
            10px;

        left:
            10px;

        width:
            auto;
    }


    /* =====================================================
       NAVEGAÇÃO MOBILE
    ===================================================== */

    .customer-mobile-nav {

        position:
            fixed;

        left:
            10px;

        right:
            10px;

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

        z-index:
            500;

        min-height:
            58px;

        display:
            grid;

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

        padding:
            5px;

        border:
            1px solid
            rgba(
                230,
                232,
                236,
                0.96
            );

        border-radius:
            18px;

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

        box-shadow:
            0 14px 40px
            rgba(
                15,
                23,
                42,
                0.16
            );

        backdrop-filter:
            blur(
                18px
            );
    }


    .customer-mobile-nav-item {

        min-height:
            48px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            2px;

        border-radius:
            13px;

        background:
            transparent;

        color:
            var(
                --gd-gray-400
            );
    }


    .customer-mobile-nav-item > span {

        font-size:
            0.95rem;
    }


    .customer-mobile-nav-item small {

        font-size:
            0.50rem;

        font-weight:
            800;
    }


    .customer-mobile-nav-item.active {

        background:
            var(
                --gd-primary-soft
            );

        color:
            var(
                --gd-primary
            );
    }
}


/* =========================================================
   MOBILE MUITO PEQUENO
========================================================= */

@media (
    max-width:
    390px
) {

    .customer-auth-card {

        padding:
            19px 14px;
    }


    .customer-auth-heading h1 {

        font-size:
            1.40rem;
    }


    .customer-summary-card {

        padding:
            9px;
    }


    .customer-summary-card span {

        font-size:
            0.49rem;
    }


    .customer-summary-card strong {

        font-size:
            0.95rem;
    }


    .customer-tracking-metric {

        padding:
            10px 5px;
    }


    .customer-tracking-metric span {

        font-size:
            0.47rem;
    }


    .customer-tracking-metric strong {

        font-size:
            0.57rem;
    }


    .customer-order-card-header {

        gap:
            7px;
    }


    .customer-order-store {

        gap:
            7px;
    }


    .customer-order-status {

        padding:
            0 6px;
    }
}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
========================================================= */

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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}