/*
Template Name: Jarda - ESports, Online Game and Gaming Store HTML Template
Author: Askbootstrap
Author URI: https://themeforest.net/user/askbootstrap/portfolio
Version: 1.0
*/
/*
- body
- Extra
- Filters
- Top Nav
- Card
- Footer
- Mobile Media
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
/* body */
body {
    background: #e9e9e9;
    font-size: 14px;
    color: #121212;
    font-family: 'Roboto', sans-serif;
}
.bg-dark {
    background-color: #ffffff !important;
}
.bg-dark-2 {
    background-color: #e8e8e8 !important;
}
.gradient-1 {
    background: rgb(65, 0, 185);
    background: -moz-linear-gradient(to right bottom, rgb(65, 0, 185), rgb(0, 198, 255));
    background: -webkit-linear-gradient(to right bottom, rgb(65, 0, 185), rgb(0, 198, 255));
    background: linear-gradient(to right bottom, rgb(65, 0, 185), rgb(0, 198, 255));
}
.gradient-2 {
    background: rgb(240, 75, 90);
    background: -moz-linear-gradient(to right bottom, rgb(240, 75, 90), rgb(237, 169, 93));
    background: -webkit-linear-gradient(to right bottom, rgb(240, 75, 90), rgb(237, 169, 93));
    background: linear-gradient(to right bottom, rgb(240, 75, 90), rgb(237, 169, 93));
}

.platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}

.platform-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

/* hover profissional: linha inteira */
.table-hover tbody tr:hover .platform-icon svg {
    color: #495057;
}

/* dark mode */
.dark .table-hover tbody tr:hover .platform-icon svg {
    color: #d1d5db;
}
/* Extra */

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-page {
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #f7f8fa 0%,
            #f2f4f7 100%
        );
}

.login-page-row {
    min-height: 100vh;
    padding-top: 32px;
    padding-bottom: 32px;
}

.login-card-column {
    width: 100%;
    max-width: 560px;
}

/* ============================================================
   LOGIN CARD
   ============================================================ */

.login-card {
    width: 100%;
    padding: 0;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #dce3eb;
    border-radius: 8px;

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

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

.login-card-header {
    padding: 24px 28px 22px;

    background: #ffffff;
    border-bottom: 1px solid #e6ebf1;
}

.login-card-brand {
    margin-bottom: 9px;

    color: #f36f45;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.login-card-title {
    margin: 0;

    color: #111827;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.login-card-description {
    max-width: 400px;
    margin: 7px 0 0;

    color: #667085;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* ============================================================
   LOGIN BODY
   ============================================================ */

.login-card-body {
    padding: 24px 28px 27px;

    background: #ffffff;
}

/* ============================================================
   LOGIN FORM
   ============================================================ */

.login-form {
    width: 100%;
}

.login-form-group {
    margin-bottom: 18px;
}

.login-form-label {
    display: block;
    margin: 0 0 7px;

    color: #344054;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.login-form-control {
    width: 100%;
    height: 42px;
    padding: 9px 11px;

    color: #111827;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 5px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;

    box-shadow: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.login-form-control:hover {
    border-color: #98a2b3;
}

.login-form-control:focus {
    outline: none;

    color: #111827;
    background: #ffffff;
    border-color: #8d99a8;

    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}

.login-form-control::placeholder {
    color: #98a2b3;
}

.login-form-control:-webkit-autofill,
.login-form-control:-webkit-autofill:hover,
.login-form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;

    border-color: #d0d5dd;

    transition: background-color 9999s ease-out 0s;
}

.login-form-control.is-invalid {
    color: #111827;
    background-image: none;
    border-color: #d26a6a;
}

.login-form-control.is-invalid:hover {
    border-color: #c85252;
}

.login-form-control.is-invalid:focus {
    border-color: #c85252;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.08);
}

/* ============================================================
   LOGIN ERRORS
   ============================================================ */

.login-errors {
    margin-bottom: 20px;
    padding: 12px 14px;

    color: #912018;
    background: #fff7f6;
    border: 1px solid #f3c7c3;
    border-radius: 6px;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.login-errors-title {
    margin-bottom: 4px;

    color: #912018;
    font-size: 12px;
    font-weight: 600;
}

.login-errors-list {
    margin: 0;
    padding-left: 18px;
}

.login-errors-list li {
    margin: 0;
}

.login-errors-list li + li {
    margin-top: 3px;
}

/* ============================================================
   REMEMBER ME
   ============================================================ */

.login-remember {
    min-height: 22px;
    margin-top: 1px;
    margin-bottom: 22px;
    padding-left: 24px;
}

.login-remember .custom-control-input {
    cursor: pointer;
}

.login-remember .custom-control-label {
    display: inline-flex;
    align-items: center;

    min-height: 20px;
    padding-top: 1px;

    color: #667085;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;

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

.login-remember .custom-control-label::before {
    top: 1px;
    left: -24px;

    width: 16px;
    height: 16px;

    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 2px;

    box-shadow: none;
}

.login-remember .custom-control-label::after {
    top: 1px;
    left: -24px;

    width: 16px;
    height: 16px;
}

.login-remember
.custom-control-input:hover
~ .custom-control-label::before {
    border-color: #98a2b3;
}

.login-remember
.custom-control-input:checked
~ .custom-control-label::before {
    background-color: #249f46;
    border-color: #249f46;
}

.login-remember
.custom-control-input:focus
~ .custom-control-label::before {
    border-color: #249f46;
    box-shadow: 0 0 0 3px rgba(36, 159, 70, 0.12);
}

.login-remember
.custom-control-input:disabled
~ .custom-control-label {
    color: #98a2b3;
    cursor: not-allowed;
}

.login-remember
.custom-control-input:disabled
~ .custom-control-label::before {
    background: #f2f4f7;
    border-color: #d0d5dd;
}

/* ============================================================
   LOGIN BUTTON
   ============================================================ */

.login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 42px;
    padding: 9px 16px;

    color: #ffffff;
    background-color: #249f46;
    border: 1px solid #249f46;
    border-radius: 6px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;

    box-shadow: none;
    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.05s ease;
}

.login-submit:hover {
    color: #ffffff;
    background-color: #1f8e3e;
    border-color: #1f8e3e;
}

.login-submit:focus {
    color: #ffffff;
    background-color: #1f8e3e;
    border-color: #1f8e3e;
    box-shadow: none;
}

.login-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(36, 159, 70, 0.18);
}

.login-submit:active {
    color: #ffffff;
    background-color: #1b7f37;
    border-color: #1b7f37;

    transform: translateY(1px);
}

.login-submit:disabled,
.login-submit.disabled {
    color: #ffffff;
    background-color: #8bc99b;
    border-color: #8bc99b;

    cursor: not-allowed;
    opacity: 1;
}

/* ============================================================
   FOOTER NOTE
   ============================================================ */

.login-footer-note {
    margin-top: 14px;

    color: #7b8794;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

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

@media (max-width: 991.98px) {
    .login-card-column {
        max-width: 540px;
    }
}

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

@media (max-width: 767.98px) {
    .login-page-row {
        min-height: 100svh;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .login-card-column {
        max-width: 520px;
    }

    .login-card-header {
        padding: 22px 20px 19px;
    }

    .login-card-body {
        padding: 21px 20px 23px;
    }

    .login-card-brand {
        margin-bottom: 8px;

        font-size: 10px;
    }

    .login-card-title {
        font-size: 20px;
    }

    .login-card-description {
        margin-top: 6px;

        font-size: 12px;
    }

    .login-form-group {
        margin-bottom: 17px;
    }

    .login-form-control {
        height: 42px;

        font-size: 13px;
    }

    .login-remember {
        margin-bottom: 20px;
    }

    .login-submit {
        min-height: 42px;
    }
}

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

@media (max-width: 479.98px) {
    .login-page-row {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .login-card-header {
        padding: 20px 18px 18px;
    }

    .login-card-body {
        padding: 20px 18px 21px;
    }

    .login-card-title {
        font-size: 19px;
    }

    .login-card-description {
        max-width: none;
    }

    .login-footer-note {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 359.98px) {
    .login-card-header {
        padding-right: 16px;
        padding-left: 16px;
    }

    .login-card-body {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* ============================================================
   KEY2ARENA CLIENT HEADER
   ============================================================ */

.client-header-card {
    width: 100%;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.client-header-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    align-items: stretch;
}

/* ============================================================
   CLIENT INFORMATION
   ============================================================ */

.client-header-intro {
    display: flex;
    justify-content: center;
    flex-direction: column;

    min-width: 0;
    min-height: 126px;
    padding: 24px 28px;

    background: #ffffff;
}

.client-header-brand {
    margin-bottom: 7px;

    color: #667085;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.client-header-title {
    margin: 0;

    color: #111827;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.15px;

    overflow-wrap: anywhere;
}

.client-header-subtitle {
    margin: 5px 0 0;

    color: #667085;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* ============================================================
   BALANCE
   ============================================================ */

.client-header-balance {
    display: flex;
    justify-content: center;
    flex-direction: column;

    min-width: 0;
    min-height: 126px;
    padding: 21px 24px;

    background: #ffffff;
    border-left: 1px solid #e6ebf1;

    text-align: right;
}

.client-header-balance-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.client-header-balance-label {
    color: #667085;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.client-header-amount {
    margin-top: 4px;

    color: #344054;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.35px;
    white-space: nowrap;
}

.client-header-amount--positive {
    color: #15803d !important;
}

.client-header-amount--neutral {
    color: #344054 !important;
}

.client-header-amount--inactive {
    color: #98a2b3 !important;
}

/* ============================================================
   STATUS AND NOTE
   ============================================================ */

.client-header-status {
    margin-top: 4px;

    color: #667085;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
}

.client-header-status--inactive {
    color: #98a2b3;
}

.client-header-status--danger {
    color: #b42318;
}

.client-header-note {
    margin-top: 5px;

    color: #667085;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
}

/* ============================================================
   VIP CREDIT BADGE
   ============================================================ */

.client-header-vip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 4px;

    min-height: 24px;
    padding: 5px 9px;

    color: #ffffff;
    background: #e76f51;
    border: 1px solid #e76f51;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;

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

.client-header-vip-badge > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: inherit;
    font-size: 10px;
    line-height: 1;

    pointer-events: none;
}

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

@media (max-width: 991.98px) {
    .client-header-layout {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 285px);
    }

    .client-header-intro {
        padding-right: 23px;
        padding-left: 24px;
    }

    .client-header-balance {
        padding-right: 20px;
        padding-left: 20px;
    }
}

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

@media (max-width: 767.98px) {
    .client-header-layout {
        display: block;
    }

    .client-header-intro {
        min-height: 0;
        padding: 21px 20px 18px;
    }

    .client-header-brand {
        margin-bottom: 6px;
        font-size: 9px;
    }

    .client-header-title {
        font-size: 19px;
    }

    .client-header-subtitle {
        font-size: 12px;
    }

    .client-header-balance {
        min-height: 0;
        padding: 17px 20px 19px;

        background: #ffffff;
        border-top: 1px solid #e6ebf1;
        border-left: 0;

        text-align: left;
    }

    .client-header-balance-top {
        justify-content: flex-start;
    }

    .client-header-amount {
        font-size: 23px;
    }

    .client-header-status,
    .client-header-note {
        font-size: 11px;
    }
}

/* ============================================================
   GENERIC / ORDER STATUSES (B2B Style)
   ============================================================ */

.order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase; /* Mantido uppercase para status de pedido (padrão ERP) */
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* 1. PROCESSING (Azul Neutro) */
.status-processing {
    background-color: #f0f9ff !important;
    color: #0369a1 !important;
    border-color: #bae6fd !important;
}

/* 2. PAID (Ciano/Teal) */
.status-paid {
    background-color: #ecfeff !important;
    color: #0e7490 !important;
    border-color: #a5f3fc !important;
}

/* 3. AWAITING RELEASE (Amber/Gold - Estilo Pre-order) */
.status-awaiting_release {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}

/* 4. FULFILLING (Indigo/Violeta) */
.status-fulfilling {
    background-color: #f5f3ff !important;
    color: #5b21b6 !important;
    border-color: #ddd6fe !important;
}

/* 5. PARTIALLY DELIVERED (Laranja/Ocre) */
.status-partially_delivered {
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fed7aa !important;
}

/* 6. DELIVERED (Verde Suave) */
.status-delivered {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
}

/* 7. CANCELED & FAILED (Tons de Vermelho/Slate) */
.status-canceled,
.status-failed {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

/* ============================================================
   SECURITY / ACCESS / 2FA STATUSES
   ============================================================ */

/* Enabled (Verde - Ativo e Seguro) */
.status-enabled {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

/* Disabled (Cinza/Slate - Desativado/Neutro) */
.status-disabled {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

/* Revoked (Vermelho Escuro - Acesso revogado por segurança) */
.status-revoked {
    background-color: #fff1f2 !important;
    color: #9f1239 !important;
    border: 1px solid #fecdd3 !important;
}

/* Aplica a base comum para garantir o alinhamento */
.status-deposit, .status-debit, .status-withdrawal,
.status-enabled, .status-disabled, .status-revoked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ============================================================
   SECURITY SETTINGS
   ============================================================ */

.security-setting-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

.security-card-body {
    padding: 22px 24px 24px;
}

.security-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}

.security-status-title {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.security-status-description {
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    line-height: 1.4;
}

.security-setting-text {
    margin: 16px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
}

.security-setting-actions {
    margin-top: 16px;
}

@media (max-width: 767.98px) {
    .security-card-body {
        padding: 18px;
    }

    .security-status-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .security-setting-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   ORDERS LIST
   ============================================================ */

#ordersAccordion .order-card:last-child {
    margin-bottom: 0 !important;
}

.orders-empty-state {
    padding: 28px 20px;
    text-align: center;
}

.orders-empty-icon {
    margin-bottom: 8px;
    color: #98a2b3;
    font-size: 32px;
    line-height: 1;
}

.orders-empty-title {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.orders-empty-description {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

/* ============================================================
   CARD E ESTRUTURA BASE
   ============================================================ */
.order-card {
    border-radius: 10px !important;
    overflow: hidden;
    border: 1px solid #e5e7eb !important;
}

.order-header {
    cursor: pointer;
    background-color: #ffffff;
    padding: 1rem 1.25rem;
    transition: background 0.2s ease;
}

.order-header:hover { background-color: #f8fafc; }

/* Header Aberto */
.order-header:not(.collapsed) {
    background-color: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

/* Container Flex principal */
.order-header-content {
    display: flex;
    align-items: flex-start; /* Alinha por cima para o ID longo não quebrar o centro */
    justify-content: space-between;
    gap: 15px;
}

/* ============================================================
   ORDER HISTORY
   ============================================================ */

.orders-history-card {
    overflow: hidden;
}

.orders-history-body {
    padding: 20px 24px 24px;
    background: #f8fafc;
}

/* Individual order */
.orders-history-card .order-card {
    overflow: hidden;
    margin-bottom: 14px !important;
    background: #ffffff;
    border: 1px solid #dfe6ee !important;
    border-radius: 8px;
    box-shadow: none !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.orders-history-card .order-card:last-child {
    margin-bottom: 0 !important;
}

.orders-history-card .order-card:hover {
    border-color: #cbd5e1 !important;
}

/* Order clickable header */
.orders-history-card .order-header {
    padding: 15px 18px;
    background: #ffffff;
    cursor: pointer;

    transition:
        background-color 0.15s ease;
}

.orders-history-card .order-header:hover {
    background: #fbfcfd;
}

.orders-history-card .order-header:not(.collapsed) {
    background: #f8fafc;
}

/* Header content */
.orders-history-card .order-header-content {
    gap: 18px;
}

.orders-history-card .header-left {
    min-width: 0;
}

/* Accordion icon */
.orders-history-card .accordion-arrow-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;

    color: #475467;
    background: #f2f4f7;
    border-radius: 50%;

    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.orders-history-card
.order-header:not(.collapsed)
.accordion-arrow-wrapper {
    color: #ffffff;
    background: #111827;
}

.orders-history-card .accordion-arrow {
    margin: 0;
    font-size: 18px;
    line-height: 1;

    transition:
        transform 0.18s ease;
}

.orders-history-card
.order-header:not(.collapsed)
.accordion-arrow {
    transform: rotate(180deg);
}

/* Order identification */
.orders-history-card .order-number {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.orders-history-card .order-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 5px;
}

.orders-history-card .order-date {
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

/* View details */
.orders-history-card .view-details-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 11px;

    color: #475467;
    background: #f2f4f7;
    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.orders-history-card
.order-header:not(.collapsed)
.view-details-pill {
    color: #111827;
    background: #e7ebf0;
}

/* Total */
.orders-history-card .total-stack {
    min-width: 82px;
}

.orders-history-card .total-label {
    color: #98a2b3;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
}

.orders-history-card .order-total-price {
    margin-top: 3px;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* Expanded content */
.orders-history-card .order-details-body {
    padding: 20px 24px 22px;
    background: #ffffff;
    border-top: 1px solid #e6ebf1;
}

/* Empty state */
.orders-empty-state {
    padding: 30px 20px;
    text-align: center;
}

.orders-empty-icon {
    margin-bottom: 8px;
    color: #98a2b3;
    font-size: 32px;
    line-height: 1;
}

.orders-empty-title {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.orders-empty-description {
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

/* Mobile */
@media (max-width: 767.98px) {
    .orders-history-body {
        padding: 14px;
    }

    .orders-history-card .order-header {
        padding: 14px;
    }

    .orders-history-card .order-header-content {
        gap: 10px;
    }

    .orders-history-card .accordion-arrow-wrapper {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
    }

    .orders-history-card .order-details-body {
        padding: 16px 14px 18px;
    }

    .orders-history-card .total-stack {
        min-width: 68px;
    }

    .orders-history-card .order-total-price {
        font-size: 14px;
    }
}

/* ============================================================
   LADO ESQUERDO (SETA + INFO)
   ============================================================ */
.header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0; /* Previne que o texto empurre as outras colunas */
}

/* Bolinha da Seta - FIXA */
.accordion-arrow-wrapper {
    width: 28px;
    height: 28px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* IMPEDE DE ESTICAR */
    margin-top: 2px;
    transition: all 0.3s ease;
}

.accordion-arrow {
    font-size: 18px;
    color: #64748b;
    transition: transform 0.3s ease;
}

/* Animação Seta Aberta */
.order-header:not(.collapsed) .accordion-arrow-wrapper {
    background: #1d4ed8;
    transform: rotate(180deg);
}
.order-header:not(.collapsed) .accordion-arrow {
    color: #ffffff !important;
}

/* Texto do Pedido */
.order-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.order-number {
    font-weight: 800;
    color: #0f172a;
    font-size: 0.95rem;
    line-height: 1.2;
    word-break: break-all; /* Quebra o ID se for muito grande */
    margin-bottom: 4px;
}

.order-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-date {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
}

/* ============================================================
   BALANCE ACCOUNT
   ============================================================ */

.balance-order-card {
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}

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

.balance-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    padding: 22px 24px 16px;

    border-bottom: 1px solid #e6ebf1;
}

.balance-card-title {
    color: #111827;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.balance-card-subtitle {
    margin-top: 3px;

    color: #667085;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

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

.balance-card-body {
    padding: 22px 24px 24px;
}

/* ============================================================
   WALLET MAIN AMOUNT
   ============================================================ */

.balance-amount-label {
    margin-bottom: 6px;

    color: #667085;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.balance-main-amount {
    color: #344054;

    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

/* ============================================================
   AMOUNT STATES
   ============================================================ */

.wallet-amount-positive {
    color: #15803d !important;
}

.wallet-amount-neutral {
    color: #344054 !important;
}

.wallet-amount-negative {
    color: #b42318 !important;
}

.wallet-amount-inactive {
    color: #98a2b3 !important;
}

/* ============================================================
   WALLET BALANCE MESSAGE
   ============================================================ */

/*
 * Mensagem exibida abaixo do saldo principal.
 */
.wallet-amount-help {
    margin-top: 7px;

    color: #667085;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
}

/*
 * Usado quando o cliente precisa adicionar saldo
 * ou ultrapassou o limite de crédito aprovado.
 */
.wallet-amount-help-danger {
    color: #b42318;
    font-weight: 500;
}

/* ============================================================
   WALLET STATUS ALERTS
   ============================================================ */

.balance-card-body .alert {
    margin-top: 16px;

    border-radius: 6px;

    font-size: 12px;
    line-height: 1.45;
}

.balance-card-body .alert strong {
    font-weight: 700;
}

/* ============================================================
   HOME / PRICELIST BALANCE
   ============================================================ */

.wallet-home-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 2px;
}

.wallet-home-amount {
    color: #344054;

    font-weight: 600;
    line-height: 1.25;
}

.wallet-home-message {
    margin-top: 2px;

    color: #667085;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

/* ============================================================
   WALLET DETAILS
   ============================================================ */

/*
 * Agrupa as linhas de informações abaixo do saldo:
 * Credit limit, Available to spend e Funding status.
 */
.balance-details {
    margin-top: 16px;
}

.balance-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 41px;
    padding: 10px 0;

    border-top: 1px solid #eef2f7;

    font-size: 13px;
    line-height: 1.4;
}

.balance-line span {
    min-width: 0;

    color: #667085;
}

.balance-line strong {
    min-width: 0;

    color: #111827;

    font-weight: 700;
    text-align: right;

    overflow-wrap: anywhere;
}

/*
 * O limite aprovado não representa saldo positivo.
 * Por isso permanece visualmente neutro.
 */
.wallet-credit-limit-value {
    color: #111827 !important;
}

/*
 * Status informativos exibidos nas linhas de detalhes.
 */
.wallet-status-danger {
    color: #b42318 !important;
}

.wallet-status-neutral {
    color: #344054 !important;
}

.wallet-status-positive {
    color: #15803d !important;
}

/*
 * Sobrescreve a cor padrão de .balance-line strong
 * quando uma classe de estado estiver aplicada.
 */
.balance-line strong.wallet-amount-positive {
    color: #15803d !important;
}

.balance-line strong.wallet-amount-neutral {
    color: #344054 !important;
}

.balance-line strong.wallet-amount-negative {
    color: #b42318 !important;
}

.balance-line strong.wallet-amount-inactive {
    color: #98a2b3 !important;
}

/* ============================================================
   VIP CREDIT BADGE
   ============================================================ */

.wallet-vip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 5px;

    min-height: 30px;
    padding: 7px 12px;

    color: #ffffff;
    background: #ff7452;
    border: 1px solid #ff7452;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;

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

.wallet-vip-badge > span,
.wallet-vip-badge svg,
.wallet-vip-badge i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    color: inherit;

    pointer-events: none;
}

.wallet-vip-badge--compact {
    min-height: 24px;
    padding: 5px 9px;

    font-size: 10px;
}

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

@media (max-width: 767.98px) {
    .balance-card-header {
        gap: 12px;

        padding: 19px 20px 15px;
    }

    .balance-card-body {
        padding: 20px;
    }

    .balance-main-amount {
        font-size: 26px;
    }

    .wallet-vip-badge {
        min-height: 26px;
        padding: 6px 10px;

        font-size: 11px;
    }

    .wallet-vip-badge--compact {
        min-height: 22px;
        padding: 4px 8px;

        font-size: 9px;
    }

    .balance-details {
        margin-top: 14px;
    }

    .balance-line {
        gap: 10px;

        min-height: 39px;
        padding: 9px 0;

        font-size: 12px;
    }

    .balance-line span {
        flex: 1 1 auto;
    }

    .balance-line strong {
        flex: 0 1 auto;
    }

    .wallet-amount-help {
        font-size: 11px;
    }
}

/* ============================================================
   NOTES
   ============================================================ */

.balance-note {
    padding: 10px 12px;

    color: #475467;
    background: #f8fafc;

    border: 1px solid #e6ebf1;
    border-radius: 6px;

    font-size: 13px;
    line-height: 1.5;
}

/* ============================================================
   BADGES
   ============================================================ */

.balance-order-card .badge {
    padding: 5px 8px;

    font-size: 11px;
    font-weight: 700;
}

/* ============================================================
   TOP-UP
   ============================================================ */

.balance-topup-body {
    padding-top: 18px;
}

.balance-topup-method {
    position: relative;
}

.balance-topup-method + .balance-topup-method {
    margin-top: 10px;
}


/* Payment method */

.balance-topup-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 12px 14px;

    color: #111827;
    background: #f8fafc;

    border: 1px solid #e1e7ee;
    border-radius: 7px;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.balance-topup-intro:hover {
    background: #fffaf7;
    border-color: #f0c4b5;
}

.balance-topup-intro:focus {
    outline: none;
}

.balance-topup-intro:focus-visible {
    border-color: #e9a18a;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .08);
}

.balance-topup-intro[aria-expanded="true"] {
    background: #fffaf7;
    border-color: #eeb8a7;
}

.balance-topup-intro:disabled {
    background: #fafbfc;
    border-color: #e6ebf1;

    cursor: not-allowed;
    opacity: .7;
}

.balance-topup-intro:disabled:hover {
    background: #fafbfc;
    border-color: #e6ebf1;
}


/* Payment method content */

.balance-topup-content {
    flex: 1 1 auto;
    min-width: 0;
}

.balance-topup-title {
    display: block;

    color: #111827;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.balance-topup-text {
    display: block;

    margin-top: 3px;

    color: #667085;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}


/* Payment method action */

.balance-topup-action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 9px;

    min-width: 0;

    color: #475467;
}

.balance-topup-action-label,
.balance-topup-unavailable-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.balance-topup-action-label {
    color: #475467;
    transition: color .15s ease;
}

.balance-topup-unavailable-label {
    color: #98a2b3;
}

.balance-topup-intro:hover .balance-topup-action-label,
.balance-topup-intro[aria-expanded="true"] .balance-topup-action-label {
    color: #c2410c;
}


/* Accordion */

.balance-accordion-toggle {
    user-select: none;
    -webkit-user-select: none;
}

button.balance-accordion-toggle {
    appearance: none;
    -webkit-appearance: none;
}


/* Arrow */

.balance-toggle-icon {
    display: inline-block;
    flex: 0 0 auto;

    width: 7px;
    height: 7px;
    margin-top: -3px;

    color: #667085;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);

    pointer-events: none;

    transition:
        color .15s ease,
        transform .18s ease,
        margin-top .18s ease;
}

.balance-topup-intro:hover .balance-toggle-icon {
    color: #c2410c;
}

.balance-accordion-toggle[aria-expanded="true"] .balance-toggle-icon {
    margin-top: 4px;

    color: #c2410c;

    transform: rotate(-135deg);
}


/* Collapse */

.balance-collapse {
    padding-top: 8px;
}

.balance-collapse[hidden] {
    display: none !important;
}


/* Payment details */

.balance-bank-box {
    overflow: hidden;

    background: #fff;

    border: 1px solid #dfe6ee;
    border-radius: 7px;
}

.balance-bank-row {
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr);
    align-items: center;
    gap: 14px;

    min-height: 40px;
    padding: 9px 14px;

    border-bottom: 1px solid #edf1f5;
}

.balance-bank-row:last-child {
    border-bottom: 0;
}

.balance-bank-label {
    color: #667085;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.balance-bank-value {
    min-width: 0;

    color: #111827;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.balance-bank-value-code {
    font-weight: 700;
    letter-spacing: .01em;
}


/* USDT */

.balance-bank-row-address {
    align-items: center;
}

.balance-usdt-address-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.balance-usdt-address {
    display: block;
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;

    color: #111827;
    background: #f8fafc;

    border: 1px solid #e1e7ee;
    border-radius: 5px;

    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 34px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.balance-usdt-address:hover {
    background: #fff;
    border-color: #cfd7e1;
}

.balance-usdt-address:focus {
    outline: none;

    background: #fff;
    border-color: #98a2b3;

    box-shadow: 0 0 0 3px rgba(17, 24, 39, .06);
}


/* Copy */

.balance-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 6px;

    min-height: 34px;
    padding: 0 10px;

    color: #344054;
    background: #fff;

    border: 1px solid #d0d5dd;
    border-radius: 5px;

    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

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

    transition:
        color .15s ease,
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.balance-copy-button svg,
.balance-copy-button span {
    pointer-events: none;
}

.balance-copy-button svg {
    flex: 0 0 auto;
}

.balance-copy-button:hover {
    color: #c2410c;

    background: #fffaf7;
    border-color: #eeb8a7;
}

.balance-copy-button:focus {
    outline: none;
}

.balance-copy-button:focus-visible {
    border-color: #e9a18a;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .08);
}

.balance-copy-button.is-copied {
    color: #15803d;

    background: #f0fdf4;
    border-color: #bbdfc5;
}

.balance-copy-button:disabled {
    cursor: wait;
    opacity: .7;
}


/* QR code */

.balance-bank-row-qr {
    align-items: flex-start;
}

.balance-usdt-qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px;

    background: #fff;

    border: 1px solid #dfe6ee;
    border-radius: 6px;

    overflow: hidden;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

    touch-action: manipulation;
}

.balance-usdt-qr img {
    display: block;

    width: 112px;
    height: 112px;
    max-width: 100%;

    object-fit: contain;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    -webkit-user-drag: none;

    cursor: default;
}


/* USDT warning */

.balance-usdt-footer {
    margin-top: 8px;
}

.balance-usdt-note {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;

    margin: 0;
    padding: 9px 11px;

    color: #667085;
    background: #f8fafc;

    border: 1px solid #e6ebf1;
    border-radius: 6px;

    font-size: 11px;
    line-height: 1.45;
}

.balance-usdt-note strong {
    color: #344054;
    font-weight: 700;
}


/* Payment confirmation */

.balance-payment-confirmation {
    margin-top: 12px;
    padding: 10px 12px;

    color: #526477;
    background: #fffaf5;

    border-left: 3px solid #f97316;
    border-radius: 4px;

    font-size: 12px;
    line-height: 1.5;
}

.balance-payment-confirmation strong {
    color: #1f2937;
    font-weight: 600;
}

.balance-payment-confirmation a {
    color: #e85d04;
    font-weight: 600;
    text-decoration: none;
}

.balance-payment-confirmation a:hover {
    text-decoration: underline;
}


/* Unavailable */

.balance-topup-unavailable {
    margin-top: 8px;
    padding: 9px 11px;

    color: #667085;
    background: #f8fafc;

    border: 1px solid #e6ebf1;
    border-radius: 6px;

    font-size: 11px;
    line-height: 1.45;
}


/* Mobile */

@media (max-width: 767.98px) {
    .balance-card-header {
        padding: 18px 18px 14px;
    }

    .balance-card-body {
        padding: 18px;
    }

    .balance-topup-body {
        padding-top: 15px;
    }

    .balance-topup-intro {
        gap: 12px;

        min-height: 60px;
        padding: 11px 12px;
    }

    .balance-topup-title {
        font-size: 13px;
    }

    .balance-topup-text {
        font-size: 11px;
    }

    .balance-topup-action {
        gap: 8px;
    }

    .balance-topup-action-label {
        display: none;
    }

    .balance-bank-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;

        min-height: 0;
        padding: 9px 12px;
    }

    .balance-bank-label {
        font-size: 11px;
    }

    .balance-bank-value {
        font-size: 12px;
    }

    .balance-usdt-address-wrapper {
        align-items: stretch;
        flex-direction: column;

        width: 100%;
    }

    .balance-usdt-address,
    .balance-copy-button {
        width: 100%;
    }

    .balance-usdt-qr {
        display: flex;

        width: fit-content;
        max-width: 100%;
    }

    .balance-usdt-qr img {
        width: 108px;
        height: 108px;
    }

    .balance-payment-confirmation {
        margin-top: 10px;
        padding: 9px 11px;

        font-size: 11px;
    }
}

@media (max-width: 479.98px) {
    .balance-topup-intro {
        min-height: 58px;
    }

    .balance-topup-text {
        max-width: 260px;
    }

    .balance-topup-unavailable-label {
        max-width: 82px;

        font-size: 10px;
        text-align: right;
        white-space: normal;
    }
}

/* ============================================================
   CENTRO E DIREITA (PILL E PREÇO)
   ============================================================ */
.header-center {
    align-items: center;
    justify-content: center;
}

.view-details-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    transition: 0.2s;
}

.order-header:not(.collapsed) .view-details-pill {
    opacity: 0;
}

.header-right {
    flex-shrink: 0;
    text-align: right;
}

.total-stack {
    display: flex;
    flex-direction: column;
}

.total-label {
    font-size: 9px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
}

.order-total-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

/* Wallet Top up modal */

.wallet-topup-modal .modal-dialog {
    max-width: 440px;
}

.wallet-topup-modal .modal-content {
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(16, 24, 40, 0.16);
}

.wallet-topup-modal .modal-header {
    align-items: center;
    padding: 22px 26px 16px;
    border-bottom: 0;
}

.wallet-topup-modal .modal-title {
    color: #172b4d;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.wallet-topup-modal [data-wallet-top-up-close].btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 12px;
    border: 0;
    border-radius: 6px;
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
}

.wallet-topup-modal [data-wallet-top-up-close].btn-link:hover {
    background: #f2f4f7;
}

.wallet-topup-modal .modal-body {
    padding: 0 26px 12px;
}

.wallet-topup-modal .modal-body > p:first-child {
    color: #667085 !important;
    font-size: 13px;
    line-height: 1.6;
}

.wallet-topup-modal .wallet-topup-amount-field {
    position: relative;
    margin-top: 24px;
}

.wallet-topup-modal .wallet-topup-amount-field label {
    position: absolute;
    top: -9px;
    left: 12px;
    z-index: 1;
    margin: 0;
    padding: 0 6px;
    background: #fff;
    color: #475467;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.wallet-topup-modal .wallet-topup-amount-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 60px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #b8c2ce;
    border-radius: 5px;
    color: #172b4d;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wallet-topup-modal .wallet-topup-amount-input::placeholder {
    color: #98a2b3;
    font-weight: 400;
    opacity: 1;
}

.wallet-topup-modal .wallet-topup-amount-input:hover {
    border-color: #8493a5;
}

.wallet-topup-modal .wallet-topup-amount-input:focus {
    outline: none;
    border-color: #ff704d;
    box-shadow: 0 0 0 3px rgba(255, 112, 77, 0.14);
}

.wallet-topup-modal .wallet-topup-amount-field:focus-within label {
    color: #c44829;
}

.wallet-topup-modal .wallet-topup-amount-input.is-invalid {
    border-color: #d92d20;
}

.wallet-topup-modal .wallet-topup-amount-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.wallet-topup-modal .wallet-topup-help {
    margin: 10px 2px 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.7;
}

.wallet-topup-modal .alert {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13px;
}

.wallet-topup-modal .modal-footer {
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 26px 24px;
    border-top: 0;
}

.wallet-topup-modal .modal-footer .btn {
    min-height: 42px;
    margin: 0;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.wallet-topup-modal .modal-footer .btn-light {
    background: #f2f4f7;
    border-color: #f2f4f7;
    color: #475467;
}

.wallet-topup-modal .modal-footer .btn-primary {
    background: #ff704d;
    border-color: #ff704d;
    color: #fff;
}

.wallet-topup-modal .modal-footer .btn-primary:hover {
    background: #ed603e;
    border-color: #ed603e;
}

.wallet-topup-modal .modal-footer .btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(255, 112, 77, 0.2);
}

.wallet-topup-modal .modal-footer .btn-primary:disabled {
    opacity: 0.65;
    cursor: wait;
}

@media (max-width: 575.98px) {
    .wallet-topup-modal .modal-dialog {
        margin: 16px;
    }

    .wallet-topup-modal .modal-header {
        padding: 20px 20px 14px;
    }

    .wallet-topup-modal .modal-body {
        padding: 0 20px 10px;
    }

    .wallet-topup-modal .modal-footer {
        padding: 16px 20px 20px;
    }

    .wallet-topup-modal .modal-footer .btn {
        flex: 1;
    }
}

/* Bank deposit instructions */

.wallet-deposit-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #475467;
    font-size: 13px;
    text-decoration: none;
}

.wallet-deposit-back:hover {
    color: #c44829;
    text-decoration: none;
}

.wallet-deposit-card {
    border: 1px solid #e6ebf1;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.06);
}

.wallet-deposit-card .balance-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 26px;
}

.wallet-deposit-card .balance-card-body {
    padding: 24px 26px;
}

.wallet-deposit-card .order-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid #e6ebf1;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.wallet-deposit-card .status-pending {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.wallet-deposit-card .status-deposit {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.wallet-deposit-card .status-adjustment {
    color: #475467;
    background: #f8fafc;
    border-color: #dfe6ee;
}

.wallet-deposit-card .status-danger {
    color: #b42318;
    background: #fff5f5;
    border-color: #fecaca;
}

.wallet-deposit-label {
    color: #667085;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.wallet-deposit-amount {
    margin-top: 4px;
    color: #172b4d;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
}

.wallet-deposit-expiry {
    margin-top: 8px;
    color: #667085;
    font-size: 12px;
}

.wallet-deposit-instructions {
    margin: 22px 0 16px;
    color: #475467;
    font-size: 13px;
    line-height: 1.7;
}

.wallet-deposit-fields {
    border: 1px solid #e6ebf1;
    border-radius: 6px;
}

.wallet-deposit-field {
    padding: 14px 16px;
}

.wallet-deposit-field + .wallet-deposit-field {
    border-top: 1px solid #eef2f7;
}

.wallet-deposit-value-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-top: 5px;
}

.wallet-deposit-value {
    min-width: 0;
    color: #344054;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.wallet-deposit-copy {
    flex-shrink: 0;
    padding: 5px 9px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 5px;
    color: #475467;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.wallet-deposit-copy:hover {
    background: #f8fafc;
    border-color: #98a2b3;
}

.wallet-deposit-copy:focus-visible,
.wallet-deposit-back:focus-visible {
    outline: 2px solid #ff704d;
    outline-offset: 3px;
}

.wallet-deposit-copy:disabled {
    opacity: 0.6;
    cursor: wait;
}

.wallet-deposit-reference {
    margin-top: 20px;
    padding: 16px;
    background: #fff8f5;
    border: 1px solid #ffd9cc;
    border-radius: 6px;
}

.wallet-deposit-reference-value {
    min-width: 0;
    color: #172b4d;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.wallet-deposit-reference-help {
    margin: 12px 0 0;
    color: #92452c;
    font-size: 12px;
    line-height: 1.7;
}

.wallet-deposit-footnote {
    margin: 18px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.7;
}

.wallet-deposit-copy-feedback {
    color: #475467;
    font-size: 12px;
    line-height: 1.6;
}

.wallet-deposit-copy-feedback:not(:empty) {
    margin-top: 12px;
}

@media (max-width: 575.98px) {
    .wallet-deposit-card .balance-card-header {
        padding: 18px 20px;
    }

    .wallet-deposit-card .balance-card-body {
        padding: 20px;
    }

    .wallet-deposit-amount {
        font-size: 28px;
    }

    .wallet-deposit-value-row {
        gap: 10px;
    }

    .wallet-deposit-reference-value {
        font-size: 12px;
    }
}

/* Expandable pending bank deposits */

.balance-pending-accordion {
    margin-top: 22px;
}

.balance-pending-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 40px;
    list-style: none;
    cursor: pointer;
}

.balance-pending-toggle::-webkit-details-marker {
    display: none;
}

.balance-pending-toggle::before,
.balance-pending-toggle::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e6ebf1;
}

.balance-pending-toggle-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #667085;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.balance-pending-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    background: #fff4ee;
    border: 1px solid #ffdfd1;
    border-radius: 12px;
    color: #b54726;
    font-size: 10px;
    font-weight: 600;
}

.balance-pending-chevron {
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.balance-pending-accordion[open] .balance-pending-chevron {
    transform: rotate(180deg);
}

.balance-pending-toggle:hover .balance-pending-toggle-content,
.balance-pending-accordion[open] .balance-pending-toggle-content {
    color: #344054;
}

.balance-pending-toggle:focus-visible {
    outline: 2px solid #ff704d;
    outline-offset: 4px;
    border-radius: 4px;
}

.balance-pending-panel {
    padding-top: 8px;
}

.balance-pending-description {
    margin: 0 0 12px;
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.balance-pending-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 7px;
}

.balance-pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: transparent;
}

.balance-pending-item + .balance-pending-item {
    border-top: 1px solid #eef2f7;
}

.balance-pending-info {
    min-width: 0;
}

.balance-pending-amount {
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.balance-pending-reference {
    margin-top: 4px;
    color: #98a2b3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.balance-pending-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 32px;
    color: #c44829;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.balance-pending-link:hover {
    color: #a6381d;
    text-decoration: underline;
}

.balance-pending-link:focus-visible {
    outline: 2px solid #ff704d;
    outline-offset: 3px;
    border-radius: 3px;
}

@media (max-width: 575.98px) {
    .balance-pending-toggle {
        gap: 8px;
    }

    .balance-pending-toggle-content {
        gap: 6px;
        font-size: 11px;
    }

    .balance-pending-item {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
    }

    .balance-pending-reference {
        font-size: 10px;
    }
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.order-status-badge {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
}
.status-paid, .status-delivered { background: #dcfce7; color: #166534; }
.status-pending, .status-processing, .status-fulfilling { background: #fef3c7; color: #92400e; }
.status-canceled { background: #fee2e2; color: #991b1b; }

/* ============================================================
   MOBILE ADJUSTMENTS
   ============================================================ */
@media (max-width: 767px) {
    .order-header { padding: 0.75rem 1rem; }
    .order-number { font-size: 0.85rem; }
    .order-total-price { font-size: 1rem; }
    .accordion-arrow-wrapper { width: 24px; height: 24px; }
    .accordion-arrow { font-size: 16px; }
}

/* ============================================================
   TABS SEGMENTADAS (ESTILO B2B PROFISSIONAL)
   ============================================================ */

/* Wrapper que permite o scroll horizontal no mobile se as abas excederem a largura */
.order-tabs-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 12px; /* Espaço para não encostar no card abaixo */
    margin-bottom: 5px;
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
}

/* Esconde a barra de scroll em alguns navegadores para ficar mais limpo */
.order-tabs-wrapper::-webkit-scrollbar {
    height: 4px;
}
.order-tabs-wrapper::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}

/* Container das abas (o fundo cinza claro arredondado) */
.order-tabs {
    display: inline-flex;
    background-color: #f1f5f9; /* Fundo sutil */
    padding: 4px;
    border-radius: 10px;
    gap: 4px;
    border: 1px solid #e2e8f0;
}

/* Estilo individual de cada aba */
.order-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Hover: efeito ao passar o mouse */
.order-tab:hover {
    color: #1e293b;
    background-color: #e2e8f0;
}

/* Aba Ativa (Status selecionado) */
.order-tab.active {
    background-color: #ffffff !important;
    color: #1d4ed8 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-color: #e2e8f0;
}

/* Contador (o númerozinho ao lado do texto) */
.order-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 6px;
    background-color: #e2e8f0; /* Fundo neutro */
    color: #475569;
    transition: all 0.2s ease;
}

/* Contador quando a aba está ativa */
.order-tab.active .order-tab-count {
    background-color: #eff6ff;
    color: #1d4ed8;
}

/* Estilo para abas vazias (opcional: deixa elas mais discretas) */
.order-tab.is-empty {
    opacity: 0.6;
    font-weight: 500;
}

/* Ajustes para Mobile */
@media (max-width: 767px) {
    .order-tab {
        padding: 6px 12px;
        font-size: 12px;
    }

    .order-tab-count {
        font-size: 10px;
        height: 18px;
        min-width: 18px;
    }
}

/* Garante que o texto dos botões não suma no celular */
.btn-sm {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px !important;
    height: 32px; /* Altura fixa para toque */
}

/* Ajuste fino na tabela para parecer premium */
.table-responsive {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #edf2f7;
}

.table thead th {
    letter-spacing: 0.5px;
    border-bottom: 1px solid #edf2f7 !important;
}

.table tbody tr:last-child {
    border-bottom: none !important;
}

/* Ajuste para telas muito pequenas */
@media (max-width: 576px) {
    .btn-sm {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Se o nome do jogo for muito longo, ele não quebra o layout */
    .table td {
        max-width: 180px;
    }
}

/* ============================================================
   B2B CART
   ============================================================ */

.b2b-cart-card {
    width: 100%;
}


/* ============================================================
   HEADER CART SUMMARY
   ============================================================ */

.cart-summary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 142px;
    height: 38px;
    padding: 0 14px;

    color: #17913a;
    background: #ffffff;
    border: 1px solid #28a745;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease;
}

.cart-summary-link:hover {
    color: #157f33;
    background: #f2fff5;
    border-color: #218838;
    text-decoration: none;
}

.cart-summary-link:focus {
    outline: none;
}

.cart-summary-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.12);
}

.cart-summary-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    white-space: nowrap;
}

.cart-summary-separator {
    margin: 0 3px;

    color: #28a745;
    opacity: 0.65;
}

.cart-loading {
    pointer-events: none;
    opacity: 0.55;
}


/* ============================================================
   CART PRODUCTS
   ============================================================ */

.cart-products-body {
    padding: 0;
}

.cart-products-body .table-responsive-mobile {
    margin: 16px 24px 24px;
    padding: 0;

    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e6ebf1;
    border-radius: 6px;
}

.cart-products-table {
    width: 100%;
    margin: 0;

    table-layout: auto;
    border-collapse: collapse;
}


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

.cart-products-table thead th {
    padding: 11px 10px;

    color: #667085;
    background: #f8fafc;

    border-top: 0;
    border-bottom: 1px solid #e6ebf1;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cart-products-table thead th:first-child,
.cart-products-table tbody td:first-child {
    padding-left: 14px;
}

.cart-products-table thead th:last-child,
.cart-products-table tbody td:last-child {
    padding-right: 14px;
}


/* ============================================================
   TABLE BODY
   ============================================================ */

.cart-products-table tbody tr {
    transition:
        background-color 0.15s ease,
        opacity 0.15s ease;
}

.cart-products-table tbody tr:hover {
    background: #fbfcfd;
}

.cart-products-table tbody td {
    padding: 16px 10px;

    color: #111827;
    border-top: 1px solid #eef2f7;

    font-size: 13px;
    vertical-align: middle;
}

.cart-products-table tbody tr:first-child td {
    border-top: 0;
}


/* ============================================================
   PRODUCT INFORMATION
   ============================================================ */

.cart-product-cell {
    min-width: 250px;
}

.cart-item-title {
    max-width: 340px;

    color: #111827;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;

    white-space: normal;
    overflow-wrap: anywhere;
}

.cart-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 4px;

    color: #667085;

    font-size: 11px;
    line-height: 1.4;
}


/* ============================================================
   AVAILABILITY
   ============================================================ */

.cart-item-availability {
    margin-top: 6px;

    color: #667085;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}


/* ============================================================
   SPECIAL FULFILLMENT
   ============================================================ */

.cart-item-special-note {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;

    width: fit-content;
    max-width: 100%;

    margin-top: 6px;

    color: #667085;

    font-size: 11px;
    line-height: 1.4;
}

.cart-item-special-note strong {
    color: #475467;

    font-weight: 700;
}

.cart-item-special-note strong::after {
    content: "·";

    margin-left: 4px;

    color: #98a2b3;
    font-weight: 400;
}

.cart-item-special-note span {
    color: #667085;
}


/* ============================================================
   DELIVERY / FULFILLMENT
   ============================================================ */

.cart-item-delivery {
    margin-top: 2px;

    color: #98a2b3;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
}

.cart-item-delivery-label {
    color: #667085;
    font-weight: 500;
}


/*
 * Compatibility with the previous delivery-note markup.
 * These classes remain neutral and discreet.
 */

.cart-item-delivery--instant,
.cart-item-delivery--request,
.cart-item-delivery--preorder {
    color: #98a2b3;
}

.cart-item-delivery-dot {
    display: none;
}


/* ============================================================
   PRODUCT NOTES / WARNINGS
   ============================================================ */

.cart-item-notes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    margin-top: 8px;
}

.cart-item-notes:empty {
    display: none;
}

.cart-item-note {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;
    padding: 3px 8px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}


/*
 * Kept for compatibility in case another cart state
 * still uses the previous delivery badges.
 */

.cart-item-note--delivery,
.cart-item-note--instant {
    color: #475467;
    background: #f2f4f7;
}

.cart-item-note--request {
    color: #475467;
    background: #f2f4f7;
}

.cart-item-note--preorder {
    color: #475467;
    background: #f2f4f7;
}


/* Actual cart warnings */

.cart-item-note--warning {
    color: #854d0e;
    background: #fef9c3;
}

.cart-item-note--danger {
    color: #991b1b;
    background: #fee2e2;
}


/* ============================================================
   QUANTITY
   ============================================================ */

.cart-products-table .cart-item-qty-input {
    display: block;

    width: 64px;
    max-width: 64px;
    height: 34px;

    margin-right: auto;
    margin-left: auto;
    padding: 5px 8px;

    color: #111827 !important;
    background: #ffffff !important;

    border: 1px solid #d0d5dd !important;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    text-align: center;
    font-variant-numeric: tabular-nums;

    box-shadow: none !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

/*
 * Override possible global cart/pricelist states.
 */
.cart-products-table .cart-item-qty-input.is-in-cart,
.cart-products-table .cart-item-qty-input.is-empty,
.cart-products-table .cart-item-qty-input.cw-qty-input {
    color: #111827 !important;
    background: #ffffff !important;
    border-color: #d0d5dd !important;
}

/* Hover */
.cart-products-table .cart-item-qty-input:hover:not(:disabled) {
    border-color: #98a2b3 !important;
}

/* Focus */
.cart-products-table .cart-item-qty-input:focus {
    outline: none;

    color: #111827 !important;
    background: #ffffff !important;

    border-color: #667085 !important;

    box-shadow:
        0 0 0 3px rgba(17, 24, 39, 0.06) !important;
}

/* Disabled */
.cart-products-table .cart-item-qty-input:disabled {
    color: #98a2b3 !important;
    background: #f8fafc !important;
    border-color: #e4e7ec !important;

    cursor: not-allowed;
    opacity: 1;
}

/* Validation error */
.cart-qty-error {
    max-width: 130px;

    margin: 5px auto 0;

    color: #dc3545;

    font-size: 10px;
    line-height: 1.35;
}


/* ============================================================
   PRICE COLUMNS
   ============================================================ */

.cart-unit-price-cell,
.cart-subtotal-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cart-subtotal-cell {
    font-weight: 600;
}


/* ============================================================
   PRODUCT ROW STATES
   ============================================================ */

.cart-row-review {
    background: #fffdf5;
}

.cart-row-review:hover {
    background: #fffdf5 !important;
}

.cart-row-unavailable {
    background: #fffafa;
}

.cart-row-unavailable:hover {
    background: #fffafa !important;
}

.cart-row-unavailable .cart-product-cell,
.cart-row-unavailable .cart-quantity-cell,
.cart-row-unavailable .cart-unit-price-cell,
.cart-row-unavailable .cart-subtotal-cell {
    opacity: 0.72;
}

.cart-row-unavailable .cart-item-title {
    color: #475467;
}

.cart-row-unavailable .qty-input {
    background: #f2f4f7;
    cursor: not-allowed;
}


/* ============================================================
   REMOVE BUTTON
   ============================================================ */

.cart-remove-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;

    margin: 0;
    padding: 0;

    color: #667085;
    background: transparent;

    border: 1px solid transparent;
    border-radius: 6px;

    font-size: 0;
    line-height: 1;

    cursor: pointer;

    visibility: visible;
    opacity: 1;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.cart-remove-icon::before {
    content: "\00D7";

    display: block;

    color: inherit;

    font-size: 21px;
    font-weight: 400;
    line-height: 1;

    transform: translateY(-1px);

    pointer-events: none;
}

.cart-remove-icon span {
    display: none;
}

.cart-remove-icon:hover {
    color: #dc3545;
    background: #fff5f5;
    border-color: #fecaca;
}

.cart-remove-icon:focus {
    outline: none;
}

.cart-remove-icon:focus-visible {
    box-shadow:
        0 0 0 3px rgba(220, 53, 69, 0.12);
}


/* ============================================================
   BACK TO PRICELIST
   ============================================================ */

.cart-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: #475467;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}

.cart-back-link:hover {
    color: #111827;
    text-decoration: none;
}

.cart-back-link:focus-visible {
    outline: none;

    border-radius: 3px;

    box-shadow:
        0 0 0 3px rgba(17, 24, 39, 0.1);
}


/* ============================================================
   ORDER SUMMARY
   ============================================================ */

.cart-summary-card {
    position: sticky;
    top: 90px;
}

.cart-summary-list {
    width: 100%;
}

.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 9px 0;

    font-size: 13px;
    line-height: 1.4;
}

.cart-summary-label {
    color: #667085;
}

.cart-summary-value {
    color: #111827;

    font-weight: 700;
    text-align: right;
    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}

.cart-summary-divider {
    height: 1px;

    margin: 8px 0;

    background: #e6ebf1;
}

.cart-summary-total {
    padding: 10px 0 4px;

    color: #111827;

    font-size: 14px;
    font-weight: 700;
}

.cart-summary-total strong {
    color: #111827;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -0.2px;

    font-variant-numeric: tabular-nums;
}


/* ============================================================
   CHECKOUT
   ============================================================ */

.cart-checkout-form {
    margin-top: 18px;
}

.cart-checkout-form #place-order-btn {
    min-height: 42px;

    border-radius: 5px;

    font-size: 13px;
    font-weight: 700;
}

.cart-checkout-form #place-order-btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}


/* ============================================================
   CHECKOUT MESSAGES
   ============================================================ */

.cart-checkout-messages {
    margin-top: 10px;
}

.cart-checkout-messages:empty {
    display: none;
}

.cart-checkout-messages > div {
    font-size: 11px;
    line-height: 1.5;
}

.cart-checkout-messages .text-muted {
    color: #667085 !important;
}


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

@media (max-width: 991.98px) {
    .cart-summary-card {
        position: static;
        margin-top: 22px;
    }
}


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

@media (max-width: 767.98px) {

    /*
     |--------------------------------------------------------------------------
     | Container
     |--------------------------------------------------------------------------
     |
     | Mobile uses individual product cards instead of one bordered table.
     |
     */

    .cart-products-body .table-responsive-mobile,
    .cart-products-body .cart-products-responsive {
        width: auto;
        min-width: 0;
        max-width: none;

        margin: 14px 16px 18px;
        padding: 0;

        overflow: visible !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;
    }

    .cart-products-responsive .cart-products-table,
    .cart-products-body .cart-products-table {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0;

        overflow: visible !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        border-collapse: separate;
    }

    .cart-products-table thead {
        display: none !important;
    }

    .cart-products-table tbody {
        display: grid !important;

        width: 100%;

        gap: 12px;
    }


    /*
     |--------------------------------------------------------------------------
     | Product card
     |--------------------------------------------------------------------------
     */

    .cart-products-table tbody tr {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            34px;

        grid-template-areas:
            "product remove"
            "quantity quantity"
            "unit-price unit-price"
            "subtotal subtotal";

        width: 100%;

        margin: 0;
        padding: 15px;

        overflow: visible !important;
        box-sizing: border-box;

        background: #ffffff;

        border: 1px solid #dfe6ee !important;
        border-radius: 7px !important;

        box-shadow: none !important;
    }

    .cart-products-table tbody tr:hover {
        background: #ffffff;

        border-color: #cbd5e1 !important;
    }


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

    .cart-products-table tbody td {
        width: auto !important;
        min-width: 0;

        padding-right: 0 !important;
        padding-left: 0 !important;

        box-sizing: border-box;

        background: transparent;

        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
    }


    /*
     |--------------------------------------------------------------------------
     | Product information
     |--------------------------------------------------------------------------
     */

    .cart-products-table tbody .cart-product-cell {
        grid-area: product;

        display: block !important;

        width: auto !important;
        min-width: 0;
        min-height: 0;

        padding:
            0
            12px
            14px
            0 !important;

        border-top: 0 !important;

        text-align: left !important;
    }

    .cart-products-table tbody .cart-product-cell::before {
        display: none !important;
        content: none !important;
    }

    .cart-item-title {
        max-width: 100%;

        color: #111827;

        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .cart-item-meta {
        margin-top: 4px;

        font-size: 11px;
    }

    .cart-item-availability {
        margin-top: 6px;

        font-size: 11px;
    }

    .cart-item-delivery {
        margin-top: 2px;

        font-size: 11px;
    }

    .cart-item-notes {
        align-items: flex-start;

        margin-top: 8px;
    }


    /*
     |--------------------------------------------------------------------------
     | Quantity / prices
     |--------------------------------------------------------------------------
     */

    .cart-products-table tbody .cart-quantity-cell,
    .cart-products-table tbody .cart-unit-price-cell,
    .cart-products-table tbody .cart-subtotal-cell {
        display: grid !important;

        grid-template-columns:
            minmax(90px, 1fr)
            auto;

        align-items: center;

        gap: 14px;

        width: 100% !important;
        min-height: 42px;

        padding: 9px 0 !important;

        border-top:
            1px solid #eef2f7 !important;

        color: #111827;

        font-size: 13px;

        text-align: right !important;
    }

    .cart-products-table tbody .cart-quantity-cell {
        grid-area: quantity;
    }

    .cart-products-table tbody .cart-unit-price-cell {
        grid-area: unit-price;
    }

    .cart-products-table tbody .cart-subtotal-cell {
        grid-area: subtotal;

        font-weight: 700;
    }

    .cart-products-table tbody .cart-quantity-cell::before,
    .cart-products-table tbody .cart-unit-price-cell::before,
    .cart-products-table tbody .cart-subtotal-cell::before {
        content: attr(data-label);

        display: block !important;

        color: #667085;

        font-size: 10px;
        font-weight: 700;
        line-height: 1.4;

        letter-spacing: 0.03em;

        text-align: left;
        text-transform: uppercase;
    }


    /* ========================================================
       QUANTITY
       ======================================================== */

    .cart-mobile-value {
        display: flex;
        align-items: flex-end;
        flex-direction: column;

        justify-self: end;

        min-width: 64px;
    }

    .cart-products-table .cart-item-qty-input {
        width: 64px;
        max-width: 64px;
        height: 34px;

        margin: 0;
    }

    .cart-qty-error {
        max-width: 150px;

        margin: 5px 0 0;

        text-align: right;
    }


    /*
     |--------------------------------------------------------------------------
     | Prices
     |--------------------------------------------------------------------------
     */

    .cart-unit-price-cell > *,
    .cart-subtotal-cell > * {
        justify-self: end;

        margin-right: 0;
        margin-left: auto;
    }


    /*
     |--------------------------------------------------------------------------
     | Remove button
     |--------------------------------------------------------------------------
     |
     | High specificity is intentional because the project's generic
     | responsive table rules may hide the last <td>.
     |
     */

    .table-responsive-mobile
    .cart-products-table
    tbody
    tr
    td.cart-remove-cell {
        grid-area: remove;

        position: static !important;
        z-index: auto;

        display: flex !important;

        align-items: flex-start;
        justify-content: flex-end;

        width: 34px !important;
        min-width: 34px !important;

        height: 34px !important;
        min-height: 34px !important;

        margin: 0 !important;
        padding: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        background: transparent !important;

        border: 0 !important;

        text-align: right !important;
    }

    .table-responsive-mobile
    .cart-products-table
    tbody
    tr
    td.cart-remove-cell::before {
        display: none !important;
        content: none !important;
    }

    .table-responsive-mobile
    .cart-products-table
    tbody
    tr
    td.cart-remove-cell
    .cart-remove-icon {
        display: inline-flex !important;

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

        width: 30px !important;
        min-width: 30px !important;

        height: 30px !important;
        min-height: 30px !important;

        margin: 0 !important;
        padding: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        color: #667085 !important;
        background: #f8fafc !important;

        border: 1px solid #d0d5dd !important;
        border-radius: 6px !important;

        font-size: 0 !important;
        line-height: 1 !important;

        cursor: pointer;

        box-shadow: none;
    }

    .table-responsive-mobile
    .cart-products-table
    tbody
    tr
    td.cart-remove-cell
    .cart-remove-icon::before {
        content: "\00D7" !important;

        display: block !important;

        color: inherit;

        font-size: 21px;
        font-weight: 400;
        line-height: 1;

        transform: translateY(-1px);

        pointer-events: none;
    }

    .table-responsive-mobile
    .cart-products-table
    tbody
    tr
    td.cart-remove-cell
    .cart-remove-icon:hover,
    .table-responsive-mobile
    .cart-products-table
    tbody
    tr
    td.cart-remove-cell
    .cart-remove-icon:active {
        color: #dc3545 !important;
        background: #fff5f5 !important;
        border-color: #fecaca !important;
    }


    /*
     |--------------------------------------------------------------------------
     | Row states
     |--------------------------------------------------------------------------
     */

    .cart-products-table tbody tr.cart-row-review {
        background: #fffdf5;
    }

    .cart-products-table tbody tr.cart-row-review:hover {
        background: #fffdf5;
    }

    .cart-products-table tbody tr.cart-row-unavailable {
        background: #fffafa;
    }

    .cart-products-table tbody tr.cart-row-unavailable:hover {
        background: #fffafa;
    }

    .cart-row-unavailable .cart-remove-cell,
    .cart-row-unavailable .cart-remove-icon {
        visibility: visible !important;
        opacity: 1 !important;
    }


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

    .cart-summary-card {
        position: static;

        margin-top: 22px;
    }

    .cart-summary-total strong {
        font-size: 17px;
    }
}

/* UI CONTEXT NOTICE — Local persistent info */
.ui-context {
    background-color: #f3f4f6;
    color: #374151;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.ui-context--security {
    background-color: #eef2ff;   /* azul claro */
    color: #1f2937;
    border-left: 3px solid #6366f1; /* destaque discreto */
}

.ui-context--danger {
    background-color: #fef2f2;       /* Vermelho bem claro de fundo */
    color: #1f2937;                  /* Mantém a cor do texto padrão */
    border-left: 3px solid #ef4444;  /* Borda esquerda em vermelho vivo */
}

/* Opcional: Se quiser que links dentro do alerta de erro fiquem vermelhos em vez de azuis */
.ui-context--danger a {
    color: #dc2626;
    text-decoration: underline;
}
.ui-context--danger a:hover {
    color: #991b1b;
}

/* Cart summary loading */
.cart-loading {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.cart-loaded {
    opacity: 1;
}

/* ============================================================
   EMPTY CART
   ============================================================ */

.cart-empty-card {
    width: 100%;
}

.cart-empty-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 230px;
    padding: 38px 24px;

    text-align: center;
}

/* ============================================================
   EMPTY CART ICON
   ============================================================ */

.cart-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    margin-bottom: 14px;

    color: #667085;
    background: #f8fafc;

    border: 1px solid #e6ebf1;
    border-radius: 50%;

    font-size: 24px;
    line-height: 1;

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

.cart-empty-icon i {
    display: block;

    font-size: 24px;
    line-height: 1;
}

/* ============================================================
   EMPTY CART TITLE
   ============================================================ */

.cart-empty-title {
    margin: 0;

    color: #111827;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

/* ============================================================
   EMPTY CART DESCRIPTION
   ============================================================ */

.cart-empty-description {
    max-width: 420px;
    margin: 5px 0 0;

    color: #667085;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* ============================================================
   EMPTY CART ACTION
   ============================================================ */

.cart-empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 150px;
    min-height: 32px;

    margin-top: 18px;
    padding: 5px 11px 5px 8px;

    color: #15803d;
    background: #ffffff;

    border: 1px solid #8bc99c;
    border-radius: 5px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    box-shadow: none;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.cart-empty-action:hover {
    color: #166534;

    background: #f3faf5;
    border-color: #6fba85;

    text-decoration: none;
}

.cart-empty-action:focus {
    outline: none;
    box-shadow: none;
}

.cart-empty-action:focus-visible {
    border-color: #58a970;

    box-shadow:
        0 0 0 3px rgba(21, 128, 61, 0.10);
}

.cart-empty-action:active {
    color: #14532d;

    background: #eaf7ed;
    border-color: #58a970;
}

/* ============================================================
   EMPTY CART ACTION ICON
   ============================================================ */

.cart-empty-action-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 19px;
    height: 19px;

    color: currentColor;
}

.cart-empty-action-icon {
    display: block;

    width: 17px;
    height: 17px;

    color: currentColor;
}

/* ============================================================
   EMPTY CART ACTION LABEL
   ============================================================ */

.cart-empty-action-label {
    display: inline-flex;
    align-items: center;

    min-height: 17px;

    color: inherit;

    line-height: 1;
}

/* ============================================================
   EMPTY CART — MOBILE
   ============================================================ */

@media (max-width: 767.98px) {
    .cart-empty-body {
        min-height: 210px;
        padding: 32px 18px;
    }

    .cart-empty-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }

    .cart-empty-icon i {
        font-size: 22px;
    }

    .cart-empty-action {
        min-width: 145px;
        min-height: 31px;

        padding: 5px 10px 5px 8px;
        gap: 6px;

        font-size: 10px;
    }

    .cart-empty-action-icon-wrap {
        width: 18px;
        height: 18px;
    }

    .cart-empty-action-icon {
        width: 17px;
        height: 17px;
    }
}

/* ======================================
   Pricelist quantity control
====================================== */

.cart-qty-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

/* ======================================
   Quantity input
====================================== */

.cart-qty-group .cw-qty-input.form-control {
    width: 90px;
    min-width: 90px;
    max-width: 90px;

    height: 32px;
    min-height: 32px;

    padding: 4px 6px;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    background-color: #ffffff;
    color: #374151;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-align: center;

    box-shadow: none;
    appearance: auto;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.cart-qty-group .cw-qty-input.form-control::placeholder {
    color: #9ca3af;
    opacity: 1;
    text-align: center;
}

.cart-qty-group .cw-qty-input.form-control:focus::placeholder {
    opacity: 0;
}

.cart-qty-group .cw-qty-input.form-control:hover {
    border-color: #cbd5e1;
}

.cart-qty-group .cw-qty-input.form-control:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cart-qty-group .cw-qty-input.form-control.is-empty {
    background-color: #ffffff;
    color: #9ca3af;
    font-weight: 500;
}

.cart-qty-group .cw-qty-input.form-control.is-in-cart {
    background-color: #d9f99d;
    border-color: #84cc16;
    color: #365314;
    font-weight: 600;
}

.cart-qty-group .cw-qty-input.form-control.is-invalid {
    background-color: #ffffff;
    border-color: #dc3545;
    color: #991b1b;
    box-shadow: none;
}

.cart-qty-group .cw-qty-input.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

.cart-qty-group .cw-qty-input.form-control:disabled {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;

    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

.cart-qty-group .cw-qty-input.form-control:disabled:hover,
.cart-qty-group .cw-qty-input.form-control:disabled:focus {
    border-color: #e5e7eb;
    box-shadow: none;
}

/* ======================================
   Add/update cart button
====================================== */

.cart-qty-button {
    width: 32px;
    min-width: 32px;
    max-width: 32px;

    height: 32px;
    min-height: 32px;

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

    padding: 0;
    margin: 0;

    border: 1px solid #d1d5db;
    border-radius: 6px;

    background-color: #ffffff;
    color: #6b7280;

    line-height: 1;
    box-shadow: none;
    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.cart-qty-button:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}

.cart-qty-button:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cart-qty-button:disabled {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;

    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

.cart-qty-button.is-loading {
    pointer-events: none;
}

.cart-qty-button-icon {
    width: 15px;
    height: 15px;
    display: block;
}

.cart-qty-button .spinner-border {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* ======================================
   Inline validation message
====================================== */

.cart-qty-error {
    margin-top: 4px;
    color: #dc3545;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

/* ======================================
   Number spinner
====================================== */

.cart-qty-group .cw-qty-input::-webkit-inner-spin-button {
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.cart-qty-group .cw-qty-input:hover::-webkit-inner-spin-button {
    opacity: 0.6;
}

.cart-qty-group .cw-qty-input:focus::-webkit-inner-spin-button {
    opacity: 0.8;
}

.cart-qty-group .cw-qty-input[type="number"] {
    -moz-appearance: number-input;
}

/* ======================================
   Cart quantity input
====================================== */

.cart-item-qty-input.form-control {
    width: 70px;
    min-width: 70px;
    max-width: 70px;

    height: 32px;
    min-height: 32px;

    padding: 4px 6px;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    background-color: #ffffff;
    color: #374151;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-align: center;

    box-shadow: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.cart-item-qty-input.form-control:hover {
    border-color: #cbd5e1;
}

.cart-item-qty-input.form-control:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.cart-item-qty-input.form-control.is-empty {
    background-color: #ffffff;
    color: #9ca3af;
    font-weight: 500;
}

.cart-item-qty-input.form-control.is-in-cart {
    background-color: #d9f99d;
    border-color: #84cc16;
    color: #365314;
    font-weight: 600;
}

.cart-item-qty-input.form-control.is-invalid {
    background-color: #ffffff;
    border-color: #dc3545;
    color: #991b1b;
    box-shadow: none;
}

.cart-item-qty-input.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

.cart-item-qty-input.form-control:disabled {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;

    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

.cart-item-qty-input.form-control:disabled:hover,
.cart-item-qty-input.form-control:disabled:focus {
    border-color: #e5e7eb;
    box-shadow: none;
}

/* Spinner */
.cart-item-qty-input::-webkit-inner-spin-button {
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.cart-item-qty-input:hover::-webkit-inner-spin-button {
    opacity: 0.6;
}

.cart-item-qty-input:focus::-webkit-inner-spin-button {
    opacity: 0.8;
}

.cart-item-qty-input[type="number"] {
    -moz-appearance: number-input;
}

/* ==========================================================================
   ESTRUTURA PARA HOME (Mantém o padrão de Badge destacado)
   ========================================================================== */
.badge-stock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 6px;
    letter-spacing: -0.1px;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: default;
    text-transform: none;
}

/* Cores da Home (Estilo original com fundo e borda) */
.badge-preorder {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}
.badge-request {
    background-color: #f0f9ff !important;
    color: #0369a1 !important;
    border-color: #bae6fd !important;
}
.badge-out {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}

/* ==========================================================================
   ESTRUTURA PARA O CARRINHO (Aviso minimalista e discreto)
   ========================================================================== */
[class^="badge-cart-"] {
    display: inline-flex;
    align-items: center;
    font-size: 11px; /* Fonte ligeiramente menor para não chamar tanta atenção */
    font-weight: 400; /* Texto mais fino (regular em vez de medium) */
    white-space: nowrap;
    cursor: default;
    background-color: transparent !important; /* Remove o fundo chamativo */
    border: none !important; /* Remove as bordas */
    padding: 0 !important; /* Remove o espaçamento interno de botão */
}

/* Ícone de bolinha sutil antes do texto no carrinho (Dica de UX elegante) */
[class^="badge-cart-"]::before {
    content: "•";
    margin-right: 5px;
    font-size: 14px;
}

/* Cores discretas apenas para o texto/ponto no Carrinho */
.badge-cart-preorder {
    color: #d97706 !important; /* Amber text puro */
}

.badge-cart-request {
    color: #0284c7 !important; /* Sky blue text puro */
}

.badge-cart-instant {
    color: #059669 !important; /* Emerald green text puro */
}

/* Container do Card Pedido */
.order-card {
    border-radius: 10px; /* Um pouco mais arredondado para um ar moderno */
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

/* Header do Pedido */
.order-header-info {
    gap: 8px;
}

.order-number {
    font-weight: 700;
    font-size: 0.9rem; /* Levemente menor para não brigar com o preço */
    letter-spacing: -0.01em;
    color: #1a202c;
}

.order-date {
    font-size: 0.78rem;
    color: #718096; /* Cinza suave */
}

.order-total-price {
    font-weight: 800;
    font-size: 1.05rem; /* Destaque principal do header */
    color: #2d3748;
}

/* Status Badge Adjustment */
.order-status-badge {
    font-size: 0.7rem !important;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
}

/* Seção de Resumo e Botões */
.products-summary-title {
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #a0aec0; /* Texto discreto para o título da seção */
}

.order-actions-gap {
    gap: 8px;
}

.btn-order-action {
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

/* Tabela de Produtos */
.order-table-head {
    border-bottom: 1px solid #edf2f7;
}

.order-table-head th {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #a0aec0;
    letter-spacing: 0.02em;
    padding-bottom: 12px !important;
}

.order-table-body {
    font-size: 0.82rem; /* Tamanho de leitura confortável */
}

.order-item-row:not(:last-child) {
    border-bottom: 1px solid #f7fafc; /* Linha sólida bem clara em vez de dashed */
}

.game-name {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    color: #2d3748;
}

.game-details {
    font-size: 0.72rem;
    color: #718096;
    margin-top: 2px;
}

.badge-failed {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
}

/* Alerta de Cancelamento */
.cancel-alert {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

/* Ajuste de colunas da tabela para precisão */
.table-sm td, .table-sm th {
    padding: 12px 4px;
}

/* ===============================
   Game title cell
================================ */

.game-title-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.game-title {
    font-weight: 400;
    color: #212529;
    line-height: 1.25;
}

/* ===============================
   Platform badge
================================ */

.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    width: fit-content;

    font-size: 12px;
    font-weight: 500;

    padding: 3px 8px;

    border-radius: 6px;

    background: #f8f9fa;
    border: 1px solid #e5e7eb;

    color: #495057;
}

.platform-badge svg {
    width: 13px;
    height: 13px;
    color: #6c757d;
}

.platform-name {
    line-height: 1;
}

/* ======================================
   Pricelist filters (B2B clean)
====================================== */

/* wrapper já existente */
.price-list_filter {
    position: relative;
}


/* ===============================
   SELECT (Region)
=============================== */

.price-list_filter select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: #fff;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 500;

    padding: 6px 32px 6px 10px;

    color: #374151;

    cursor: pointer;

    transition: all 0.15s ease;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

.price-list_filter select:hover {
    border-color: #cbd5e1;
}

.price-list_filter select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}


/* ===============================
   SEARCH INPUT (match do select)
=============================== */

.price-list_search input {
    border: 1px solid #e5e7eb;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 500;

    padding: 6px 10px;

    color: #374151;

    transition: all 0.15s ease;
}

.price-list_search input::placeholder {
    color: #9ca3af;
}

.price-list_search input:hover {
    border-color: #cbd5e1;
}

.price-list_search input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.price-tag {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 6px;

    color: #166534;
    background: rgba(22, 163, 74, 0.06);

    white-space: nowrap;
}

.price-tag.small {
    font-size: 10px;
    opacity: 0.85;
}

.position-sticky {
    top: 86px;
}
a{
    text-decoration: none !important;
}
.btn {
    font-size: 14px;
    padding: 9px 21px;
}
.btn-link {
    color: #343a40;
}
.btn-sm {
    font-size: 12px;
    padding: 5px 14px;
}
.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.2);
}
.btn-light {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
}
.btn-lg {
    padding: 13px 46px;
}
.custom-checkbox .custom-control-label::before {
    border-radius: 0px;
    border: 1px solid #e2e2e2;
    box-shadow: none !important;
}
.custom-control {
    line-height: 26px;
}
.form-control {
    border: 1px solid #e2e2e2;
    border-radius: 0px;
    font-size: 14px;
    min-height: 42px;
    box-shadow: none !important;
}
.form-control:focus {
    border: none;
    border: 1px solid #6c757d;
}
.custom-control label {
    color: rgba(0,0,0,.5)!important;
    width: 100%;
    cursor: pointer;
}

.card {
    border-radius: 0px;
    border: none;
    background: #ffffff;
}
.media .rounded-circle {
    width: 40px;
}
.follow-us a {
    color: #878787;
    font-size: 26px;
    margin: 0 18px;
}
.follow-us:hover a {
    color: #000;
}
.follow-us a:hover {
    color: #878787;
}
.rating {
    padding: 36px !important;
}
.specifications .nav-tabs {
    border-color: #e5e5e5 !important;
    margin-bottom: 30px;
}
.specifications .nav-tabs .nav-link {
    border: none;
    position: relative;
    border-radius: 0px;
    font-size: 13px;
    color: rgba(0,0,0,.5);
    padding: 0 0 29px 0;
}
.specifications .nav-tabs .nav-link.active {
    background: transparent !important;
    color: #007bff;
}
.specifications .nav-tabs .nav-item {
    margin: 0 30px 0 0;
}
.specifications .nav-tabs .nav-link:after {
   content: "";
   height: 5px;
   background: transparent;
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
}
.specifications .nav-tabs .nav-link.active:after {
    background: #007bff;
}
.btn-outline-facebook {
    color: #ffffff !important;
    background: #3B5998 !important;
}
.btn-outline-instagram {
    background: #125688 !important;
    color: #fff !important;
}
.alert {
    border-radius: 0px;
    border: none;
}
.custom-select {
    border: none;
    border-radius: 0px;
    font-size: 14px;
    min-height: 42px;
}
.custom-file-label {
    border: none;
    border-radius: 0px;
    font-size: 14px;
}
.bg-light {
    background-color: #f8f9fa!important;
    color: #000;
}
.bg-light .card-body{
    color: #000 !important;
}
.dropdown-menu {
    background: #ffffff;
    border-radius: 0px;
    margin: 0;
    border: 1px solid #ffffff;
    box-shadow: 0px 6px 10px rgba(0,0,0,.1)!important;
}
.dropdown-menu {
   display: block;
   visibility: hidden;
   opacity:0;
   transform: translateY(50px);
   transition:.5s ease all;
}
.dropdown-menu.show {
   display: block;
   visibility: visible;
   opacity:1;
   transform: translateY(0px);
   transition:.5s ease all;
}
.gradient-block h1 {
    font-size: 54px;
}
.help-block ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.help-block ul li {
    color: #f53838;
    font-size: 12px;
}
.carousel-indicators {
    margin: 11px 18px;
    left: auto;
}
.carousel-control-next, .carousel-control-prev {
   bottom: auto;
   background: #000;
   width: 35px;
   height: 35px;
   margin: 15px;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 12px;
}
.carousel-control-prev {
    right: 36px;
    left: auto;
}
.carousel-indicators li {
    background-color: #121212;
}
.card-header {
    border-bottom: 1px solid rgb(255, 255, 255);
}
/* End Extra */
/* Filters */
.filters-search {
    position: relative;
}
.filters-search i {
    position: absolute;
    padding: 15px 14px;
}
.filters-search .form-control {
    padding-left: 42px;
}
.filters-card-header .btn-link {
    font-size: 14px;
    width: 100%;
    display: block;
}
.filters-card-body {
    padding: 20px 0 0 0;
}
/* End Filters */
/* Sidebar */
.img-profile {
    width: 80px;
}
.sidebar-widget {
    position: relative;
}
.sidebar-widget .nav-link {
    padding: 10px 7px;
    border-radius: 0px;
    position: relative;
    color: #121212;
}
.sidebar-widget .nav-link:hover, .sidebar-widget .nav-link:focus {
    color: #000000;
}
.sidebar-widget .nav-link:hover:before, .sidebar-widget .nav-link:focus:before {
    background: #121212;
}
.sidebar-widget .nav-link i {
    min-width: 19px;
    display: inline-block;
    text-align: center;
    opacity: 0.5;
    margin: 0px 8px 0px 0px !important;
}
.sidebar-widget .nav-link:before {
    content: "";
    position: absolute;
    left: -15px;
    width: 4px;
    bottom: 5px;
    top: 5px;
    background: #ffffff;
}
.sidebar-widget .nav-link.active {
    background: transparent;
    color: #000;
}
.sidebar-widget .nav-link.active:before {
    background: #121212;
}
/* End Sidebar */
/* Top Nav */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.8);
}
.gwsale-nav-top .container {
    padding: 0 16px;
}
.gwsale-nav-top .img-profile {
    width: 30px;
    height: 30px;
}
.gwsale-nav-top .navbar-brand img {
    height: 36px;
    margin: -4px 0 0 0;
}
.gwsale-nav-top .gwsale-list-dropdown .nav-link i {
    font-size: 16px;
}
.gwsale-nav-top .gwsale-list-dropdown .nav-link .badge {
    position: absolute;
    border-radius: 50px;
    min-width: 15px;
    height: 15px;
    font-size: 9px;
    padding: 0px;
    right: 1px;
    line-height: 15px;
    top: 11px;
}
.gwsale-nav-top .nav-link {
    position: relative;
    height: 55px;
    display: flex;
    align-items: center;
}
.gwsale-nav-top .navbar-search .form-control {
    background: #e8e8e8;
    min-height: 35px;
}
.gwsale-nav-top .navbar-search .btn {
    background: #e8e8e8 !important;
    color: #74828e;
    padding: 0 12px;
    border: none;
}
.table thead th {
    border-top: 0;
}
#pricelist-table thead th:nth-child(1), #pricelist-table tbody th:nth-child(1) {
    padding-right: 0;
    padding-left: 0;
    width: 120px;
}
#pricelist-table thead th:nth-child(3) {
    padding-right: 0;
    padding-left: 0;
    width: 100px;
}
#pricelist-table thead th:nth-child(4) {
    padding-right: 0;
    padding-left: 0;
    width: 130px;
}
#pricelist-table tbody th {
    padding: 8px;
    padding-right: 8px;
    padding-left: 8px;
    vertical-align: middle;
}
#pricelist-table tbody td {
    padding: 8px;
    vertical-align: middle;
}
.navbar-light .navbar-nav .nav-link.active {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b;
}
.dropdown-list .dropdown-item {
    white-space: normal;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    line-height: 1.3rem;
}
.dropdown-list {
    padding: 0;
    border: none;
    overflow: hidden;
    width: 20rem!important;
}
.dropdown-list .dropdown-header {
    background-color: #131313;
    border: 1px solid #353535;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: .8rem 1rem;
}
.dropdown-list .icon-circle {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.no-arrow .dropdown-toggle::after {
    display: none;
}
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdown .dropdown-menu, .dropdown-item {
    font-size: .85rem;
}
.text-gray-500 {
    color: #b7b9cc!important;
}
.dropdown-list-image {
    position: relative;
    height: 2.5rem;
    width: 2.5rem;
}
.dropdown-list-image img {
    height: 2.5rem;
    width: 2.5rem;
}
.dropdown-list-image .status-indicator {
    background-color: #eaecf4;
    height: .75rem;
    width: .75rem;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    border: .125rem solid #fff;
}
.dropdown-item {
    padding: 6px 1rem;
}
/* End Top Nav */
/* Card */
.gwsale-card {
    margin-bottom: 35px;
}
.gwsale-card-body h6 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* End Card */

/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.gwsale-main {
    min-height: 0;

    margin: 0;
    padding: 0;
}

/*
 * Evita que margens Bootstrap do último bloco
 * criem um espaço excessivo antes do footer.
 */
.gwsale-main > :last-child {
    margin-bottom: 8px !important;
}

/* ============================================================
   GLOBAL SECURITY NOTICE
   ============================================================ */

.gwsale-security-notice {
    margin-top: 16px;
}

/* ============================================================
   KEY2ARENA FOOTER
   ============================================================ */

.gwsale-footer {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    background: #f8fafc;

    border: 0 !important;
    border-top: 1px solid #e4e7ec !important;
}

/* ============================================================
   FOOTER CONTENT
   ============================================================ */

.gwsale-footer-content {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: 100%;
    min-height: 68px;

    margin: 0 !important;
    padding: 20px 16px !important;

    border: 0 !important;

    text-align: center;
}

/* ============================================================
   FOOTER TEXT
   ============================================================ */

.gwsale-footer-text {
    max-width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    color: #8a94a3;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;

    letter-spacing: 0;

    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

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

@media (max-width: 767.98px) {
    .gwsale-footer-content {
        min-height: 60px;
        padding: 17px 12px !important;
    }

    .gwsale-footer-text {
        font-size: 12px;
        line-height: 1.6;
    }
}


/* ============================================================
   MOBILE TABLE SCROLL — PADRÃO DO SITE
   ============================================================ */

@media (max-width: 767.98px) {
    /*
     * Scroll horizontal somente para tabelas comuns.
     *
     * O carrinho e o histórico de saldo possuem
     * layouts mobile próprios.
     */
    .table-responsive-mobile:not(.cart-products-responsive):not(.balance-history-responsive) {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    .table-responsive-mobile:not(.cart-products-responsive):not(.balance-history-responsive) table {
        min-width: 700px;
    }

    /*
     * Exceção para a tabela do carrinho.
     */
    .cart-products-responsive {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        overflow: visible;
        -webkit-overflow-scrolling: auto;
    }

    .cart-products-responsive .cart-products-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   PRICELIST TABLE LAYOUT
   ============================================================ */

.pricelist-table {
    width: 100%;
    min-width: 980px;
    margin: 0;

    table-layout: auto;
}

.pricelist-col-image {
    width: 48px;
}

.pricelist-col-title {
    width: auto;
}

.pricelist-col-region {
    width: 180px;
}

.pricelist-col-price {
    width: 125px;
}

.pricelist-col-availability {
    width: 145px;
}

.pricelist-col-cart {
    width: 165px;
}

.pricelist-table th,
.pricelist-table td {
    vertical-align: middle;
}

.pricelist-table th:nth-child(3),
.pricelist-table td:nth-child(3) {
    min-width: 180px;
    max-width: 220px;

    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.pricelist-table th:nth-child(6),
.pricelist-table td:nth-child(6) {
    min-width: 165px;
}

/* ============================================================
   TOP NAVIGATION
   ============================================================ */

.gwsale-nav-top {
    position: sticky;
    top: 0;
    z-index: 1030;

    width: 100%;

    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 3px 8px rgba(15, 23, 42, 0.045);
}

.gwsale-nav-top .container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    min-height: 52px;
}

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

.key2arena-navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;

    width: auto;
    max-width: 126px;

    margin: 0 14px 0 0 !important;
    padding: 0;

    line-height: 1;

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

.key2arena-navbar-brand:hover {
    text-decoration: none;
}

.key2arena-navbar-brand:focus {
    outline: none;
}

.key2arena-navbar-brand:focus-visible {
    border-radius: 4px;

    box-shadow:
        0 0 0 3px rgba(243, 111, 69, 0.12);
}

.key2arena-navbar-logo {
    display: block;

    width: auto;
    max-width: 122px;
    height: 18px;

    object-fit: contain;

    pointer-events: none;

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

/* ============================================================
   PRIMARY NAVIGATION
   ============================================================ */

.key2arena-primary-nav {
    align-self: stretch;
    align-items: stretch;

    margin: 0;
}

.key2arena-primary-nav .nav-item {
    display: flex;
    align-items: stretch;
}

.key2arena-primary-nav .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 72px;
    padding: 0 14px;

    color: #475467;
    background: transparent;

    border: 0;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.key2arena-primary-nav .nav-link:hover {
    color: #ffffff;
    background: #77808c;

    text-decoration: none;
}

.key2arena-primary-nav .nav-link.active {
    color: #ffffff;
    background: #667085;

    font-weight: 600;
}

.key2arena-primary-nav
.nav-link.active::after {
    display: none !important;

    content: none !important;
}

/* ============================================================
   RIGHT ACTIONS
   ============================================================ */

.key2arena-navbar-actions {
    display: flex !important;
    align-items: center;
    flex-direction: row !important;
    flex-wrap: nowrap;

    gap: 9px;

    margin-left: auto !important;
}

/* ============================================================
   CART
   ============================================================ */

.key2arena-cart-nav {
    flex: 0 0 auto;

    margin: 0 !important;
}

/* ============================================================
   CART TRIGGER
   ============================================================ */

.cart-summary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 86px;
    height: 38px;
    min-height: 38px;

    padding: 0 10px;

    color: #344054;
    background: #ffffff;

    border: 1px solid #d0d5dd;
    border-radius: 7px;

    font-size: 13px;
    font-weight: 600;
    line-height: 20px;

    white-space: nowrap;

    box-shadow: none;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

/*
 * Mesmo padrão visual utilizado no perfil:
 * hover suave com a identidade Key2Arena.
 */
.cart-summary-link:hover {
    color: #c2410c;

    background: #fff7f3;
    border-color: #ffd8cc;

    text-decoration: none;
}

.cart-summary-link:focus {
    outline: none;
}

.cart-summary-link:focus-visible {
    color: #c2410c;

    background: #fff7f3;
    border-color: #ffbba8;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(255, 116, 82, 0.12);
}

/* ============================================================
   CART ICON
   ============================================================ */

.cart-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 17px;
    height: 20px;

    color: inherit;

    line-height: 1;
}

.cart-summary-icon svg {
    display: block;

    width: 17px;
    height: 17px;

    color: inherit;

    transition: color 0.15s ease;
}

/* ============================================================
   EMPTY CART
   ============================================================ */

.key2arena-cart-nav.is-empty
.cart-summary-empty {
    display: inline-block;
}

.key2arena-cart-nav.is-empty
.cart-summary-text {
    display: none;
}

.key2arena-cart-nav.is-empty
.cart-summary-link {
    color: #344054;

    background: #ffffff;
    border-color: #d0d5dd;
}

.key2arena-cart-nav.is-empty
.cart-summary-link:hover {
    color: #c2410c;

    background: #fff7f3;
    border-color: #ffd8cc;
}

.key2arena-cart-nav.is-empty
.cart-summary-link:focus-visible {
    color: #c2410c;

    background: #fff7f3;
    border-color: #ffbba8;

    box-shadow:
        0 0 0 3px rgba(255, 116, 82, 0.12);
}

/* ============================================================
   CART WITH ITEMS
   ============================================================ */

.key2arena-cart-nav.has-items
.cart-summary-empty {
    display: none;
}

.key2arena-cart-nav.has-items
.cart-summary-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-width: 0;

    line-height: 20px;
}

/*
 * Verde permanece somente quando existem produtos.
 * Aqui a cor possui significado funcional.
 */
.key2arena-cart-nav.has-items
.cart-summary-link {
    color: #166534;

    background: #f6fbf7;
    border-color: #b7d9c0;
}

.key2arena-cart-nav.has-items
.cart-summary-link:hover {
    color: #14532d;

    background: #f0f9f2;
    border-color: #91c59f;
}

.key2arena-cart-nav.has-items
.cart-summary-link:focus-visible {
    color: #14532d;

    background: #f0f9f2;
    border-color: #86ba94;

    box-shadow:
        0 0 0 3px rgba(21, 128, 61, 0.10);
}

/* ============================================================
   CART VALUES
   ============================================================ */

.cart-summary-separator {
    color: #98a2b3;

    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}

#cart-items-count,
#cart-total {
    font-weight: 600;
    line-height: 20px;
}

/* ============================================================
   CART LOADING
   ============================================================ */

.key2arena-cart-nav.is-loading
.cart-summary-link {
    cursor: wait;
}

.key2arena-cart-nav.is-loading
.cart-loading {
    opacity: 0.55;
}

/*
 * Evita mudanças visuais bruscas enquanto
 * o resumo do carrinho está sendo atualizado.
 */
.key2arena-cart-nav.is-loading
.cart-summary-link {
    pointer-events: none;
}

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

@media (max-width: 991.98px) {
    .cart-summary-link {
        min-width: 80px;

        padding-right: 9px;
        padding-left: 9px;

        font-size: 12.5px;
    }
}

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

@media (max-width: 767.98px) {
    #cart-summary {
        min-width: 0 !important;
        height: 36px;
        min-height: 36px;

        padding: 0 9px !important;
    }

    .cart-summary-link {
        gap: 6px;

        min-width: 0;
        height: 36px;
        min-height: 36px;

        padding: 0 9px;

        border-radius: 7px;

        font-size: 11px;
        line-height: 18px;
    }

    .cart-summary-icon {
        width: 16px;
        height: 18px;
    }

    .cart-summary-icon svg {
        width: 16px;
        height: 16px;
    }

    .key2arena-cart-nav.has-items
    .cart-summary-text {
        gap: 4px;

        line-height: 18px;
    }

    .cart-summary-separator,
    #cart-items-count,
    #cart-total {
        line-height: 18px;
    }
}

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

@media (max-width: 479.98px) {
    /*
     * Com produtos:
     *
     * [cart] 1 · €1.27
     */
    .key2arena-cart-nav.has-items
    #cart-items-label {
        display: none;
    }

    .cart-summary-link {
        min-width: 38px;
    }
}

/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 379.98px) {
    /*
     * Carrinho vazio mostra apenas o ícone.
     */
    .key2arena-cart-nav.is-empty
    .cart-summary-empty {
        display: none;
    }

    /*
     * Com produto:
     *
     * [cart] 1 · €1.27
     */
    .key2arena-cart-nav.has-items
    .cart-summary-link {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }
}

/* ============================================================
   PROFILE
   ============================================================ */

.key2arena-profile {
    position: relative;

    display: flex;
    align-items: center;
    flex: 0 0 auto;
    align-self: center;

    height: 38px;
    min-height: 38px;
    max-height: 38px;

    margin: 0;
    padding: 0;
}

/* ============================================================
   PROFILE TRIGGER
   ============================================================ */

.key2arena-profile-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 7px;

    min-width: 0;

    /*
     * Mesma altura do carrinho.
     * max-height + border-box evitam crescimento por CSS externo.
     */
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    box-sizing: border-box !important;

    color: #344054 !important;
    background: #ffffff;

    border: 1px solid #d0d5dd !important;
    border-radius: 7px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;

    white-space: nowrap;

    box-shadow: none !important;

    vertical-align: middle;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

/*
 * Mesmo padrão de hover utilizado no carrinho vazio.
 */
.key2arena-profile-trigger:hover {
    color: #c2410c !important;

    background: #fff7f3;
    border-color: #ffd8cc !important;

    text-decoration: none;
}

/*
 * Dropdown aberto.
 *
 * Mantém exatamente as mesmas dimensões do estado normal.
 */
.key2arena-profile.show
.key2arena-profile-trigger {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    color: #c2410c !important;

    background: #fff7f3;
    border-color: #ffbba8 !important;

    box-shadow: none !important;
}

.key2arena-profile-trigger:focus {
    outline: none;
}

.key2arena-profile-trigger:focus-visible {
    color: #c2410c !important;

    background: #fff7f3;
    border-color: #ffbba8 !important;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(255, 116, 82, 0.12) !important;
}

/*
 * Remove a seta padrão do Bootstrap.
 */
.key2arena-profile-trigger.dropdown-toggle::after {
    display: none !important;

    content: none !important;
}

/* ============================================================
   PROFILE EMAIL
   ============================================================ */

.key2arena-profile-email {
    display: inline-block;

    min-width: 0;
    max-width: 260px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color: inherit;

    font-size: 13px;
    font-weight: 600;
    line-height: 18px;

    text-overflow: ellipsis;
    white-space: nowrap;

    vertical-align: middle;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   PROFILE CHEVRON
   ============================================================ */

.key2arena-profile-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 16px;
    height: 18px;

    margin: 0;
    padding: 0;

    color: #98a2b3;

    line-height: 1;

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

.key2arena-profile-chevron svg {
    display: block;

    width: 14px;
    height: 14px;

    margin: 0;
    padding: 0;
}

.key2arena-profile-trigger:hover
.key2arena-profile-chevron {
    color: #e45b39;
}

.key2arena-profile.show
.key2arena-profile-chevron {
    color: #e45b39;

    transform: rotate(180deg);
}

/* ============================================================
   PROFILE MOBILE ICON
   ============================================================ */

.key2arena-profile-icon {
    display: none;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    box-sizing: border-box;

    color: #596579;
    background: #ffffff;

    border: 1px solid #d0d5dd;
    border-radius: 7px;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.key2arena-profile-icon svg {
    display: block;

    width: 17px;
    height: 17px;
}

/* ============================================================
   PROFILE DROPDOWN
   ============================================================ */

.key2arena-profile-menu {
    min-width: 220px;

    margin-top: 6px !important;
    padding: 7px;

    background: #ffffff;

    border: 1px solid #dce2e9;
    border-radius: 8px;

    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.07),
        0 16px 35px rgba(15, 23, 42, 0.10) !important;
}

/*
 * Bootstrap já possui dropdown-menu-right,
 * mas isso evita desalinhamento por CSS antigo.
 */
.key2arena-profile
.key2arena-profile-menu.dropdown-menu-right {
    right: 0;
    left: auto;
}

/* ============================================================
   DROPDOWN ITEMS
   ============================================================ */

.key2arena-profile-menu .dropdown-item {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 42px;

    margin: 0;
    padding: 9px 11px;

    box-sizing: border-box;

    color: #344054;
    background: transparent;

    border: 0;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;

    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.key2arena-profile-menu .dropdown-item:hover,
.key2arena-profile-menu .dropdown-item:focus {
    color: #b5472b;
    background: #fff7f3;

    outline: none;
    text-decoration: none;
}

.key2arena-profile-menu
.dropdown-item:hover
.key2arena-dropdown-icon,
.key2arena-profile-menu
.dropdown-item:focus
.key2arena-dropdown-icon {
    color: #e45b39;
}

/* ============================================================
   DROPDOWN ICON
   ============================================================ */

.key2arena-dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    margin-right: 9px;

    color: #667085;

    line-height: 1;

    transition: color 0.15s ease;
}

.key2arena-dropdown-icon i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin: 0 !important;
    padding: 0;

    font-size: 15px;
    line-height: 18px;

    text-align: center;
    vertical-align: middle;
}

.key2arena-dropdown-icon i::before {
    display: block;

    width: 18px;
    height: 18px;

    margin: 0;

    line-height: 18px;
    text-align: center;
}

/* ============================================================
   DROPDOWN LABEL
   ============================================================ */

.key2arena-dropdown-label {
    display: flex;
    align-items: center;
    flex: 1 1 auto;

    min-width: 0;
    min-height: 20px;

    margin: 0;

    color: inherit;

    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

/* ============================================================
   DROPDOWN DIVIDER
   ============================================================ */

.key2arena-profile-menu .dropdown-divider {
    margin: 6px 4px;

    border-top: 1px solid #eaecf0;
}

/* ============================================================
   LOGOUT
   ============================================================ */

.key2arena-profile-menu
.key2arena-logout-item {
    color: #b42318;
}

.key2arena-profile-menu
.key2arena-logout-item
.key2arena-dropdown-icon {
    color: #d92d20;
}

.key2arena-profile-menu
.key2arena-logout-item:hover,
.key2arena-profile-menu
.key2arena-logout-item:focus {
    color: #912018;
    background: #fff3f2;
}

.key2arena-profile-menu
.key2arena-logout-item:hover
.key2arena-dropdown-icon,
.key2arena-profile-menu
.key2arena-logout-item:focus
.key2arena-dropdown-icon {
    color: #b42318;
}

.key2arena-profile-menu form {
    margin: 0;
}

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

@media (max-width: 991.98px) {
    .key2arena-navbar-brand {
        max-width: 120px;

        margin-right: 12px !important;
    }

    .key2arena-navbar-logo {
        max-width: 116px;
        height: 17px;
    }

    .key2arena-profile-trigger {
        gap: 6px;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding-right: 9px !important;
        padding-left: 9px !important;
    }

    .key2arena-profile-email {
        max-width: 190px;

        font-size: 13px;
        line-height: 18px;
    }

    .key2arena-profile-menu {
        min-width: 220px;
    }
}

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

@media (max-width: 767.98px) {
    .gwsale-nav-top .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;

        min-height: 51px;
    }

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

    .gwsale-nav-top .navbar-brand,
    .key2arena-navbar-brand {
        flex: 0 1 auto;

        width: auto !important;
        max-width: 112px;

        margin: 0 !important;
        padding: 0;
    }

    .key2arena-navbar-logo {
        width: auto;
        max-width: 108px;
        height: 16px;
    }

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

    .key2arena-primary-nav {
        display: none !important;
    }

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

    .gwsale-nav-top .navbar-nav.ml-auto,
    .key2arena-navbar-actions {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-direction: row !important;
        flex-wrap: nowrap;

        width: auto !important;

        margin-left: auto !important;

        gap: 7px;
    }

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

    #cart-summary {
        min-width: 0 !important;
        height: 36px;
        min-height: 36px;

        padding: 0 9px !important;
    }

    .cart-summary-link {
        gap: 6px;

        height: 36px;
        min-height: 36px;

        font-size: 11px;
    }

    .cart-summary-icon,
    .cart-summary-icon svg {
        width: 16px;
        height: 16px;
    }

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

    .key2arena-profile {
        display: flex;
        align-items: center;

        width: 36px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
    }

    .key2arena-profile-email,
    .key2arena-profile-chevron {
        display: none;
    }

    /*
     * No mobile a borda pertence ao ícone interno.
     * O trigger externo permanece transparente.
     */
    .key2arena-profile-trigger {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        background: transparent !important;
        border: 0 !important;

        box-shadow: none !important;
    }

    .key2arena-profile-icon {
        display: inline-flex;

        width: 36px;
        height: 36px;
    }

    .key2arena-profile-trigger:hover
    .key2arena-profile-icon,
    .key2arena-profile.show
    .key2arena-profile-icon {
        color: #c2410c;

        background: #fff7f3;
        border-color: #ffbba8;
    }

    .key2arena-profile-trigger:focus-visible
    .key2arena-profile-icon {
        color: #c2410c;

        background: #fff7f3;
        border-color: #ffbba8;

        box-shadow:
            0 0 0 3px rgba(255, 116, 82, 0.10);
    }

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

    .key2arena-profile-menu {
        min-width: 218px;

        margin-top: 6px !important;
    }

    .key2arena-profile-menu
    .dropdown-item {
        min-height: 41px;

        font-size: 13px;
    }
}

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

@media (max-width: 479.98px) {
    .gwsale-nav-top .container {
        min-height: 50px;

        padding-right: 12px;
        padding-left: 12px;
    }

    .gwsale-nav-top .navbar-brand,
    .key2arena-navbar-brand {
        max-width: 106px;
    }

    .key2arena-navbar-logo {
        max-width: 102px;
        height: 15px;
    }

    /*
     * Carrinho com itens:
     * 1 · €1.27
     */
    .key2arena-cart-nav.has-items
    #cart-items-label {
        display: none;
    }

    .cart-summary-link {
        min-width: 38px;
    }

    .key2arena-profile-menu {
        min-width: 212px;
    }
}

/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 379.98px) {
    .gwsale-nav-top .navbar-brand,
    .key2arena-navbar-brand {
        max-width: 98px;
    }

    .key2arena-navbar-logo {
        max-width: 95px;
        height: 14px;
    }

    /*
     * Carrinho vazio mostra apenas o ícone.
     */
    .key2arena-cart-nav.is-empty
    .cart-summary-empty {
        display: none;
    }

    /*
     * Carrinho com produto:
     * [cart] 1 · €1.27
     */
    .key2arena-cart-nav.has-items
    .cart-summary-link {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }
}

/* ============================================================
   PRICELIST CARD
   ============================================================ */

.pricelist-card {
    width: 100%;
    overflow: hidden;

    background: #ffffff;
}

.pricelist-content {
    background: #ffffff;
}

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

.pricelist-header {
    padding: 20px 24px;

    background: #ffffff;
    border-bottom: 1px solid #e6ebf1;
}

.pricelist-header-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.pricelist-header-info {
    flex: 1 1 auto;
    min-width: 220px;
}

.pricelist-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pricelist-title {
    margin: 0;

    color: #111827;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.1px;
}

.pricelist-updated {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;

    margin: 5px 0 0;

    color: #667085;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.pricelist-updated strong {
    color: #475467;
    font-weight: 500;
}

/* ============================================================
   PRICELIST TITLE ROW
   ============================================================ */

.pricelist-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.pricelist-title {
    margin: 0;

    color: #111827;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.1px;
}

/* ============================================================
   EXPORT EXCEL BUTTON
   ============================================================ */

.pricelist-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-height: 32px;
    padding: 5px 10px 5px 8px;

    color: #15803d;
    background: #ffffff;

    border: 1px solid #8bc99c;
    border-radius: 5px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    box-shadow: none;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.pricelist-download-button:hover {
    color: #166534;

    background: #f3faf5;
    border-color: #6fba85;

    text-decoration: none;
}

.pricelist-download-button:focus {
    outline: none;
    box-shadow: none;
}

.pricelist-download-button:focus-visible {
    border-color: #58a970;

    box-shadow:
        0 0 0 3px rgba(21, 128, 61, 0.10);
}

.pricelist-download-button:active {
    color: #14532d;

    background: #eaf7ed;
    border-color: #58a970;
}

/* ============================================================
   EXPORT EXCEL ICON WRAPPER
   ============================================================ */

.pricelist-download-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 19px;
    height: 19px;

    color: currentColor;
}

/* ============================================================
   EXPORT EXCEL ICON
   ============================================================ */

.pricelist-download-icon {
    display: block;

    width: 17px;
    height: 17px;

    color: currentColor;
}

/* ============================================================
   EXPORT EXCEL LABEL
   ============================================================ */

.pricelist-download-label {
    display: inline-flex;
    align-items: center;

    min-height: 17px;

    color: inherit;

    line-height: 1;
}

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

@media (max-width: 767.98px) {
    .pricelist-title-row {
        gap: 8px;
    }

    .pricelist-download-button {
        min-height: 31px;
        padding: 5px 9px 5px 7px;
        gap: 6px;

        font-size: 10px;
    }

    .pricelist-download-icon-wrap {
        width: 18px;
        height: 18px;
    }

    .pricelist-download-icon {
        width: 17px;
        height: 17px;
    }
}

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

@media (max-width: 479.98px) {
    .pricelist-title-row {
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
    }
}

/* ============================================================
   SEARCH AND FILTER TOOLBAR
   ============================================================ */

.pricelist-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 610px;
    gap: 9px;

    width: 100%;
    max-width: 610px;
    min-width: 0;
}

.pricelist-search {
    flex: 1 1 auto;
    min-width: 0;
}

.pricelist-search input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;

    color: #344054;
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 6px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;

    box-shadow: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.pricelist-search input::placeholder {
    color: #98a2b3;
    opacity: 1;
}

.pricelist-search input:hover {
    border-color: #98a2b3;
}

.pricelist-search input:focus {
    outline: none;

    color: #111827;
    background-color: #ffffff;
    border-color: #8f9aaa;

    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}

.pricelist-search-field {
    position: relative;
}

.pricelist-search-field .form-control {
    padding-right: 2.5rem;
}

.pricelist-search-clear {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);

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

    width: 1.5rem;
    height: 1.5rem;

    padding: 0;
    border: 0;
    background: transparent;

    color: #6c757d;
    cursor: pointer;
}

.pricelist-search-clear:hover {
    color: #212529;
}

.pricelist-search-clear svg {
    width: 16px;
    height: 16px;
}

/* ============================================================
   FILTER BUTTON
   ============================================================ */

.pricelist-filter-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 7px;

    min-width: 108px;
    height: 40px;
    padding: 0 11px;

    color: #475467;
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 6px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    box-shadow: none;
    cursor: pointer;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.pricelist-filter-button:hover {
    color: #111827;
    background-color: #f8fafc;
    border-color: #98a2b3;
}

.pricelist-filter-button:focus {
    outline: none;
}

.pricelist-filter-button:focus-visible {
    border-color: #8f9aaa;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.pricelist-filter-button[aria-expanded="true"] {
    color: #111827;
    background-color: #f8fafc;
    border-color: #98a2b3;
}

.pricelist-filter-button.is-active {
    color: #166534;
    background-color: #f6fdf8;
    border-color: #b7dfc2;
}

.pricelist-filter-button.is-active:hover,
.pricelist-filter-button.is-active[aria-expanded="true"] {
    color: #14532d;
    background-color: #f0faf3;
    border-color: #9fd3ad;
}

.pricelist-filter-button__icon {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;
}

.pricelist-filter-button__text {
    display: inline-block;
}

.pricelist-filter-button__chevron {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;

    transition: transform 0.15s ease;
}

.pricelist-filter-button[aria-expanded="true"]
.pricelist-filter-button__chevron {
    transform: rotate(180deg);
}

/* ============================================================
   ACTIVE FILTER COUNT
   ============================================================ */

.pricelist-filter-count[hidden] {
    display: none !important;
}

.pricelist-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-width: 19px;
    height: 19px;
    padding: 0 5px;

    color: #ffffff;
    background-color: #475467;
    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.pricelist-filter-button.is-active
.pricelist-filter-count {
    background-color: #15803d;
}

/* ============================================================
   FILTER PANEL
   ============================================================ */

.pricelist-filters-panel[hidden] {
    display: none !important;
}

.pricelist-filters-panel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px 22px;

    width: 100%;
    margin-top: 16px;
    padding: 15px 0 0;

    background-color: transparent;
    border: 0;
    border-top: 1px solid #eef2f7;
    border-radius: 0;
}

/* ============================================================
   FILTER GROUPS
   ============================================================ */

.pricelist-filter-switches {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 10px 22px;

    min-width: 0;
}

.pricelist-filter-selects {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 10px;

    min-width: 0;
    padding-left: 20px;

    border-left: 1px solid #e6ebf1;
}

/* ============================================================
   FILTER OPTIONS
   ============================================================ */

.pricelist-filter-option {
    display: flex;
    align-items: center;
    flex: 0 0 auto;

    min-height: 36px;
}

.pricelist-filter-option .custom-control {
    min-height: 22px;
    margin: 0;
    padding-left: 38px;
}

.pricelist-filter-option .custom-control-label {
    display: inline-flex;
    align-items: center;

    min-height: 22px;
    margin: 0;
    padding: 0;

    color: #475467;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;

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

/* ============================================================
   FILTER SWITCHES
   ============================================================ */

.pricelist-filter-option
.custom-switch
.custom-control-label::before {
    top: 2px;
    left: -38px;

    width: 30px;
    height: 18px;

    background-color: #d0d5dd;
    border: 1px solid #c5cbd3;
    border-radius: 999px;

    box-shadow: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.pricelist-filter-option
.custom-switch
.custom-control-label::after {
    top: 5px;
    left: -35px;

    width: 12px;
    height: 12px;

    background-color: #ffffff;
    border-radius: 50%;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);

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

.pricelist-filter-option
.custom-switch
.custom-control-input:hover
~ .custom-control-label::before {
    border-color: #aeb6c1;
}

.pricelist-filter-option
.custom-switch
.custom-control-input:checked
~ .custom-control-label::before {
    background-color: #3f8059;
    border-color: #3f8059;
}

.pricelist-filter-option
.custom-switch
.custom-control-input:checked
~ .custom-control-label::after {
    transform: translateX(12px);
}

.pricelist-filter-option
.custom-control-input:focus
~ .custom-control-label::before {
    border-color: #3f8059;
    box-shadow: 0 0 0 3px rgba(63, 128, 89, 0.12);
}

.pricelist-filter-option
.custom-control-input:disabled
~ .custom-control-label {
    color: #98a2b3;
    cursor: not-allowed;
}

.pricelist-filter-option
.custom-control-input:disabled
~ .custom-control-label::before {
    background-color: #eaecf0;
    border-color: #d0d5dd;
}

/* ============================================================
   SELECT FILTERS
   ============================================================ */

.pricelist-filter-field,
.pricelist-filter-region {
    flex: 0 0 180px;

    width: 180px;
    min-width: 0;
    margin: 0;
}

.pricelist-filter-field select,
.pricelist-filter-region select {
    width: 100%;
    height: 36px;
    padding: 6px 30px 6px 10px;

    color: #344054;
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 5px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;

    box-shadow: none;
    cursor: pointer;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.pricelist-filter-field select:hover,
.pricelist-filter-region select:hover {
    border-color: #98a2b3;
}

.pricelist-filter-field select:focus,
.pricelist-filter-region select:focus {
    outline: none;

    color: #111827;
    background-color: #ffffff;
    border-color: #8f9aaa;

    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}

.pricelist-filter-field select:disabled,
.pricelist-filter-region select:disabled {
    color: #98a2b3;
    background-color: #f2f4f7;
    border-color: #d0d5dd;

    cursor: not-allowed;
}

/* ============================================================
   PRICELIST TABLE WRAPPER
   ============================================================ */

.pricelist-table-wrapper {
    width: 100%;
}

/* ============================================================
   PRICELIST — LARGE TABLET
   ============================================================ */

@media (max-width: 1199.98px) {
    .pricelist-header-main {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .pricelist-toolbar {
        flex-basis: auto;
        max-width: none;
    }

    .pricelist-filters-panel {
        justify-content: flex-start;
    }

    .pricelist-filter-switches {
        flex: 1 1 100%;

        width: 100%;
    }

    .pricelist-filter-selects {
        justify-content: flex-start;
        flex: 1 1 100%;

        width: 100%;
        padding-top: 13px;
        padding-left: 0;

        border-top: 1px solid #eef2f7;
        border-left: 0;
    }
}

/* ============================================================
   PRICELIST — TABLET
   ============================================================ */

@media (max-width: 991.98px) {
    .pricelist-filter-switches {
        gap: 10px 20px;
    }

    .pricelist-filter-selects {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pricelist-filter-field,
    .pricelist-filter-region {
        width: 100%;
        min-width: 0;
    }
}

/* ============================================================
   PRICELIST — MOBILE
   ============================================================ */

@media (max-width: 767.98px) {
    .pricelist-header {
        padding: 18px 16px;
    }

    .pricelist-header-main {
        gap: 14px;
    }

    .pricelist-title-row {
        justify-content: space-between;
        gap: 8px;
    }

    .pricelist-title {
        font-size: 15px;
    }

    .pricelist-updated {
        margin-top: 6px;

        font-size: 11px;
    }

    .pricelist-download-button {
        min-height: 30px;
        padding: 5px 9px;

        font-size: 10px;
    }

    /*
     * Pesquisa e botão permanecem na mesma linha.
     */
    .pricelist-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;

        width: 100%;
    }

    .pricelist-search,
    .pricelist-search input {
        width: 100%;
        min-width: 0;
    }

    .pricelist-search input {
        height: 40px;
        padding-right: 10px;
        padding-left: 10px;

        font-size: 12px;
    }

    .pricelist-filter-button {
        min-width: 96px;
        height: 40px;
        padding: 0 9px;
        gap: 6px;
    }

    /*
     * Grupos do painel em blocos separados.
     */
    .pricelist-filters-panel {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 13px;

        margin-top: 14px;
        padding-top: 14px;
    }

    /*
     * Switches em duas colunas.
     */
    .pricelist-filter-switches {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px 14px;

        width: 100%;
    }

    .pricelist-filter-option {
        width: 100%;
        min-width: 0;
        min-height: 32px;
    }

    .pricelist-filter-option .custom-control-label {
        font-size: 12px;
        white-space: normal;
    }

    /*
     * Region e Platform lado a lado.
     */
    .pricelist-filter-selects {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;

        width: 100%;
        padding-top: 13px;
        padding-left: 0;

        border-top: 1px solid #eef2f7;
        border-left: 0;
    }

    .pricelist-filter-field,
    .pricelist-filter-region {
        width: 100%;
        min-width: 0;
    }

    .pricelist-filter-field select,
    .pricelist-filter-region select {
        width: 100%;
        height: 38px;
    }
}

/* ============================================================
   PRICELIST — SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {
    .pricelist-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .pricelist-filter-switches {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .pricelist-filter-selects {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }
}

/* ============================================================
   PRICELIST — VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 379.98px) {
    .pricelist-filter-button {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .pricelist-filter-button__text,
    .pricelist-filter-button__chevron {
        display: none;
    }

    .pricelist-filter-count {
        position: absolute;
        top: -5px;
        right: -5px;

        min-width: 17px;
        height: 17px;
        padding: 0 4px;

        border: 2px solid #ffffff;

        font-size: 8px;
    }
}

/* ============================================================
   CART LAYOUT
   ============================================================ */

#cart-table th,
#cart-table td {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    #cart-content .col-lg-8,
    #cart-content .col-lg-4 {
        flex: 0 0 100%;

        max-width: 100%;
    }

    #cart-content .col-lg-4 {
        margin-top: 20px;
    }
}

/* ============================================================
   BALANCE HISTORY
   ============================================================ */

.balance-history-body {
    padding: 0;
}

.balance-history-responsive {
    margin: 16px 24px 0;
    padding: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e6ebf1;
    border-radius: 6px;
}

.balance-history-table {
    width: 100%;
    min-width: 0;

    margin: 0;

    table-layout: auto;
    border-collapse: collapse;
}

/* ============================================================
   BALANCE HISTORY — TABLE HEADER
   ============================================================ */

.balance-history-table thead th {
    padding: 12px;

    color: #475467;
    background: #f8fafc;

    border-top: 0;
    border-bottom: 1px solid #e6ebf1;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;

    white-space: nowrap;
}

.balance-history-table thead th:first-child {
    padding-left: 14px;
}

.balance-history-table thead th:last-child {
    padding-right: 14px;
}

/* ============================================================
   BALANCE HISTORY — TABLE BODY
   ============================================================ */

.balance-history-table tbody tr {
    transition: background-color 0.15s ease;
}

.balance-history-table tbody tr:hover {
    background: #fafbfd;
}

.balance-history-table tbody td {
    padding: 15px 12px;

    color: #344054;
    background: transparent;

    border-top: 1px solid #eef2f7;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    vertical-align: middle;
}

.balance-history-table tbody tr:first-child td {
    border-top: 0;
}

.balance-history-table tbody td:first-child {
    padding-left: 14px;
}

.balance-history-table tbody td:last-child {
    padding-right: 14px;
}

/* ============================================================
   BALANCE HISTORY — COLUMNS
   ============================================================ */

.balance-history-date {
    width: 26%;

    color: #667085 !important;

    font-size: 13px !important;
    font-weight: 400;

    white-space: nowrap;
}

.balance-history-type {
    width: 18%;
}

.balance-history-description {
    width: auto;

    color: #344054;

    font-size: 14px;
    font-weight: 400;

    overflow-wrap: break-word;
    word-break: normal;
}

.balance-history-amount {
    width: 145px;

    color: #344054;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    text-align: right;
    white-space: nowrap;
}

/* ============================================================
   BALANCE HISTORY — AMOUNT STATES
   ============================================================ */

/*
 * Entrada de saldo:
 * verde porque representa crédito disponível.
 */
.balance-history-amount--credit {
    color: #15803d !important;
}

/*
 * Saída normal:
 * não usamos vermelho porque compras e débitos fazem
 * parte da operação normal da conta.
 */
.balance-history-amount--debit {
    color: #344054 !important;
}

/*
 * Pode ser utilizado futuramente para falhas,
 * ajustes negativos ou situações que realmente
 * necessitem chamar atenção.
 */
.balance-history-amount--danger {
    color: #b42318 !important;
}

/*
 * Estado neutro, caso algum tipo de transação
 * não represente entrada ou saída direta.
 */
.balance-history-amount--neutral {
    color: #667085 !important;
}

/* ============================================================
   BALANCE HISTORY — TRANSACTION TYPE BADGES
   ============================================================ */

.balance-history-table .order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 25px;
    padding: 5px 9px;

    border: 1px solid transparent;
    border-radius: 5px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.025em;
    text-transform: uppercase;

    white-space: nowrap;
}

/* ============================================================
   CREDIT / DEPOSIT BADGE
   ============================================================ */

.balance-history-table
.order-status.status-deposit {
    color: #166534;
    background: #f0fdf4;

    border-color: #bbf7d0;
}

/* ============================================================
   DEBIT / ORDER BADGE
   ============================================================ */

/*
 * Débito normal de pedido.
 *
 * Azul acinzentado deixa claro que é um tipo diferente
 * de movimentação sem transmitir erro ou problema.
 */
.balance-history-table
.order-status.status-debit {
    color: #344f72;
    background: #f3f7fb;

    border-color: #d7e2ef;
}

/* ============================================================
   OPTIONAL TRANSACTION BADGES
   ============================================================ */

/*
 * Classes opcionais caso outros tipos sejam utilizados
 * posteriormente no histórico.
 */

/* Refund / returned balance */
.balance-history-table
.order-status.status-refund {
    color: #166534;
    background: #f0fdf4;

    border-color: #bbf7d0;
}

/* General wallet credit */
.balance-history-table
.order-status.status-credit {
    color: #166534;
    background: #f0fdf4;

    border-color: #bbf7d0;
}

/* Manual adjustment */
.balance-history-table
.order-status.status-adjustment {
    color: #475467;
    background: #f8fafc;

    border-color: #dfe6ee;
}

/* Informational / pending */
.balance-history-table
.order-status.status-pending {
    color: #92400e;
    background: #fffbeb;

    border-color: #fde68a;
}

/* Real problem / failed operation */
.balance-history-table
.order-status.status-danger,
.balance-history-table
.order-status.status-failed {
    color: #b42318;
    background: #fff5f5;

    border-color: #fecaca;
}

/* ============================================================
   BALANCE HISTORY — AUDIT NOTICE
   ============================================================ */

.balance-history-audit {
    margin: 16px 24px 24px !important;

    color: #667085;

    font-size: 13px;
    line-height: 1.5;
}

/* ============================================================
   BALANCE HISTORY — EMPTY STATE
   ============================================================ */

.balance-history-empty {
    padding: 40px 24px;

    color: #667085;

    text-align: center;
}

.balance-history-empty i {
    font-size: 32px;
}

/* ============================================================
   BALANCE HISTORY — MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    /*
     * Wrapper próprio do histórico.
     */
    .balance-history-responsive {
        display: block;

        width: calc(100% - 32px);
        min-width: 0;
        max-width: none;

        margin: 14px 16px 0;
        padding: 0;

        box-sizing: border-box;
        overflow: visible !important;

        background: transparent;

        border: 0;
        border-radius: 0;
    }

    /*
     * Remove larguras e comportamentos de tabela desktop.
     */
    .balance-history-responsive
    .balance-history-table {
        display: block;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0;

        overflow: visible !important;

        table-layout: auto;
        border-collapse: separate;
        border-spacing: 0;

        background: transparent;

        border: 0;
        border-radius: 0;
    }

    /*
     * Os rótulos passam a ser exibidos por data-label.
     */
    .balance-history-responsive
    .balance-history-table
    thead {
        display: none !important;
    }

    .balance-history-responsive
    .balance-history-table
    tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;

        width: 100%;
        min-width: 0;
    }

    /*
     * Cada movimentação vira um card separado.
     */
    .balance-history-responsive
    .balance-history-table
    tbody tr {
        display: block;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0;
        padding: 14px 15px;

        box-sizing: border-box;
        overflow: hidden;

        background: #ffffff;

        border: 1px solid #dfe6ee;
        border-radius: 7px;

        box-shadow: none;

        transition:
            background-color 0.15s ease,
            border-color 0.15s ease;
    }

    .balance-history-responsive
    .balance-history-table
    tbody tr:hover {
        background: #ffffff;

        border-color: #cbd5e1;
    }

    /*
     * Coluna esquerda: título.
     * Coluna direita: valor.
     */
    .balance-history-responsive
    .balance-history-table
    tbody td {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 44px;

        margin: 0;
        padding: 10px 0 !important;

        box-sizing: border-box;
        overflow: visible;

        color: #344054;
        background: transparent !important;

        border-top: 1px solid #eef2f7 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;

        font-size: 13px;
        font-weight: 400;
        line-height: 1.45;

        text-align: right;
        vertical-align: middle;
    }

    .balance-history-responsive
    .balance-history-table
    tbody td:first-child {
        padding-top: 0 !important;

        border-top: 0 !important;
    }

    .balance-history-responsive
    .balance-history-table
    tbody td:last-child {
        padding-bottom: 0 !important;
    }

    /*
     * Títulos Date, Type, Description e Amount.
     */
    .balance-history-responsive
    .balance-history-table
    tbody td::before {
        content: attr(data-label);

        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        justify-self: start;

        width: auto;
        min-width: 0;
        min-height: 24px;

        margin: 0;
        padding: 4px 7px;

        color: #475467;
        background: #f8fafc;

        border: 1px solid #eaecf0;
        border-radius: 4px;

        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0;

        text-align: left;
        text-transform: none;

        white-space: nowrap;

        opacity: 1;
    }

    /*
     * Remove larguras das colunas desktop.
     */
    .balance-history-responsive
    .balance-history-date,

    .balance-history-responsive
    .balance-history-type,

    .balance-history-responsive
    .balance-history-description,

    .balance-history-responsive
    .balance-history-amount {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0;

        box-sizing: border-box;
    }

    /*
     * Data e hora.
     */
    .balance-history-responsive
    .balance-history-date {
        color: #344054 !important;

        font-size: 13px !important;
        font-weight: 400;
        line-height: 1.45;

        text-align: right;
        white-space: nowrap;
    }

    /*
     * Badge do tipo da movimentação.
     */
    .balance-history-responsive
    .balance-history-type
    .order-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: auto;
        min-width: 0;
        min-height: 25px;

        margin-left: auto;
        padding: 5px 9px;

        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.02em;
        text-transform: uppercase;

        white-space: nowrap;
    }

    /*
     * Descrição da movimentação.
     */
    .balance-history-responsive
    .balance-history-description {
        color: #344054;

        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;

        text-align: right;

        overflow-wrap: break-word;
        word-break: normal;

        hyphens: none;
        white-space: normal;
    }

    /*
     * Valor.
     */
    .balance-history-responsive
    .balance-history-amount {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;

        text-align: right;
        white-space: nowrap;
    }

    .balance-history-responsive
    .balance-history-amount--credit {
        color: #15803d !important;
    }

    .balance-history-responsive
    .balance-history-amount--debit {
        color: #344054 !important;
    }

    .balance-history-responsive
    .balance-history-amount--danger {
        color: #b42318 !important;
    }

    .balance-history-responsive
    .balance-history-amount
    > span {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;

        width: auto;
        max-width: 100%;

        margin-left: auto;

        white-space: nowrap;
    }

    /*
     * Aviso de auditoria.
     */
    .balance-history-audit {
        margin: 16px 16px 18px !important;

        color: #667085;

        font-size: 12px;
        line-height: 1.5;
    }

    /*
     * Estado vazio.
     */
    .balance-history-empty {
        display: block !important;

        width: 100% !important;

        padding: 34px 18px !important;

        color: #667085;

        text-align: center !important;

        border: 0 !important;
    }

    .balance-history-empty::before {
        display: none !important;

        content: none !important;
    }
}

/* ============================================================
   BALANCE HISTORY — SMALL MOBILE
   ============================================================ */

@media (max-width: 399.98px) {

    .balance-history-responsive {
        width: calc(100% - 24px);

        margin-right: 12px;
        margin-left: 12px;
    }

    .balance-history-responsive
    .balance-history-table
    tbody tr {
        padding: 13px 14px;
    }

    .balance-history-responsive
    .balance-history-table
    tbody td {
        grid-template-columns: 88px minmax(0, 1fr);
        column-gap: 10px;

        min-height: 42px;

        padding: 9px 0 !important;
    }

    .balance-history-responsive
    .balance-history-table
    tbody td::before {
        min-height: 22px;

        padding: 4px 6px;

        font-size: 9px;
    }

    .balance-history-responsive
    .balance-history-date,

    .balance-history-responsive
    .balance-history-description {
        font-size: 12px !important;
    }
}

/* ============================================================
   TABLET — 768 TO 1023px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: 100%;
    }
}


/* ============================================================
   SMALL DESKTOP — 1024 TO 1200px
   ============================================================ */

@media (min-width: 1024px) and (max-width: 1200px) {
    .container {
        max-width: 100%;
    }
}


/* ============================================================
   LARGE DESKTOP — GLOBAL SITE WIDTH
   ============================================================ */

@media (min-width: 1201px) {
    .container {
        width: 100%;
        max-width: 1180px;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1200px;
    }
}


/* ============================================================
   GLOBAL TABLE IMPROVEMENTS
   ============================================================ */

.table th,
.table td {
    vertical-align: middle;
}

#place-order-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.pricelist-spinner {
    color: #f15a24;
}

/* ============================================================
   PAGINATION K2A
   ============================================================ */

.k2a-pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.k2a-pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.k2a-page a,
.k2a-page span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 34px;
    padding: 0 10px;

    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 6px;

    color: #526477;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;

    transition:
        border-color .15s ease,
        color .15s ease,
        background-color .15s ease;
}

.k2a-page a:hover {
    border-color: #f97316;
    color: #f97316;
    background: #fffaf5;
}

.k2a-page.active span {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
    font-weight: 600;
}

.k2a-page.disabled span {
    color: #aab4c0;
    background: #f8fafc;
    cursor: default;
}