/* ================================
   ESTILOS GERAIS
================================ */

.container > *:first-child {
    margin-top: 0 !important;
}

h1.display-4 {
    font-weight: 700;
    color: #343a40;
}
p.lead {
    color: #6c757d;
}
h2 {
    font-weight: 700;
    color: #343a40;
    margin-bottom: 20px;
}
label {
    font-weight: 500;
    color: #495057;
}

.btn-update {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background-color 0.3s;
}
.btn-update:hover {
    background-color: #0056b3;
}

.sidebar {
    width: 270px;                /* Largura total quando expandida */
    background-color: #343a40;   /* Cor de fundo */
    transition: width 0.3s ease; /* Animação de largura ao colapsar/expandir */
    overflow: hidden;            /* Evita barras de rolagem */
    position: fixed;             /* Fixa no canto esquerdo da tela */
    top: 40px;                 /* Fixa ao topo */
    left: 0;                     /* Fixa à esquerda */
    height: 100vh;               /* Ocupa a altura inteira da tela */
    z-index: 999;                /* Fica sobre o conteúdo normal */
}
.sidebar ul {
    list-style-type: none; /* Remove estilo de lista padrão */
    padding: 0; /* Remove padding padrão da lista */
}
.sidebar a {
    color: #ffffff !important; /* Links em branco */
    text-decoration: none !important; /* Remove sublinhado */
    display: flex; /* Exibe links em flex container */
    align-items: center; /* Centraliza ícone e texto verticalmente */
    padding: 10px 20px; /* Espaçamento interno */
}
.sidebar a:hover {
    background-color: #007bff; /* Cor de fundo azul ao hover */
}
.sidebar a:visited,
.submenu a:visited {
    color: #ffffff !important; /* Força cor branca para links visitados */
}
.sidebar a:focus,
.submenu a:focus {
    color: #ffffff !important; /* Força cor branca para links focados */
    outline: none; /* Remove outline padrão no foco */
}
.sidebar ul li i {
    margin-right: 10px; /* Espaçamento entre ícone e texto */
}

.menu-item > .submenu {
    display: none; /* Oculto por padrão */
}
.menu-item.open > .submenu {
    display: block; /* Exibe quando .open é aplicado */
}
.submenu {
    display: none;
    list-style: none;
    padding-left: 20px;
}
.submenu a {
    padding-left: 40px; /* Identação para diferenciar submenu */
    background-color: #444; /* Cor de fundo mais escura */
    border-left: 3px solid #007bff; /* Destaque na borda esquerda */
}
.submenu a:hover {
    background-color: #555; /* Fundo ainda mais escuro ao hover */
}

.sidebar.collapsed {
    width: 0; /* Zera a largura */
}
.sidebar.collapsed ul,
.sidebar.collapsed ul li,
.sidebar.collapsed .submenu {
    display: none; /* Some itens do menu */
}
.sidebar.collapsed ul li a i {
    margin-right: 0; /* Remove espaço do ícone */
    text-align: center;
}
.sidebar.collapsed ~ .content {
    margin-left: 0; /* Ao colapsar, conteúdo ocupa toda a tela */
}

.content {
    margin-left: 270px;
    margin-top: 40px;
    padding: 20px;
    min-height: calc(100vh - 60px);
    height: calc(100vh - 40px); /* Define altura fixa para evitar rolagem desnecessária */
    overflow-y: auto;
    overflow-x: hidden; /* Evita rolagem horizontal */
}

html {
    height: 100%;
    overflow: hidden; /* Impede rolagem desnecessária na página */
}

.header {
    width: 100%;
    background-color: #ffffff;
    padding: 7px; /* Espaçamento interno vertical */
    border-bottom: 1px solid #ddd; /* Linha sutil no rodapé do header */
    display: flex;
    justify-content: space-between; /* Logo à esquerda, resto à direita */
    align-items: center;
    position: fixed; /* Fixo no topo */
    z-index: 1000; /* Sobrepõe conteúdo comum */
    top: 0; 
    left: 0;
}

/* ===== MODERN BOT TOGGLE STYLES ===== */
.modern-bot-toggle-container {
    display: inline-flex;
    align-items: center;
    margin: 0 20px;
}

.modern-bot-toggle-input {
    display: none;
}

.modern-bot-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 14px 4px 4px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    user-select: none;
    height: 36px;
}

.modern-bot-toggle:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.modern-bot-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.modern-bot-toggle-input:checked + .modern-bot-toggle::before {
    opacity: 1;
}

.modern-bot-toggle-input:checked + .modern-bot-toggle {
    border-color: transparent;
}

.toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
    z-index: 1;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.modern-bot-toggle-input:checked + .modern-bot-toggle .toggle-track {
    background: rgba(255, 255, 255, 0.25);
}

.toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.modern-bot-toggle-input:checked + .modern-bot-toggle .toggle-slider {
    transform: translateX(20px);
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.3);
}

.toggle-icon {
    font-size: 11px;
    color: #64748b;
    transition: all 0.3s ease;
    z-index: 2;
}

.modern-bot-toggle-input:checked + .modern-bot-toggle .toggle-icon {
    color: #25D366;
    transform: scale(1.1) rotate(360deg);
}

.toggle-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 1;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.toggle-label {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    transition: color 0.3s ease;
    letter-spacing: 0.2px;
}

.modern-bot-toggle-input:checked + .modern-bot-toggle .toggle-label {
    color: #ffffff;
}

.toggle-status {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 8px;
    background: #e2e8f0;
    color: #64748b;
    transition: all 0.3s ease;
    display: inline-block;
    width: fit-content;
    flex-shrink: 0;
}

.modern-bot-toggle-input:checked + .modern-bot-toggle .toggle-status {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.modern-bot-toggle-input:disabled + .modern-bot-toggle {
    opacity: 0.6;
    cursor: not-allowed;
}

.modern-bot-toggle-input:disabled + .modern-bot-toggle:hover {
    transform: none;
    border-color: #e2e8f0;
    background: #f8fafc;
}

/* Animação de loading quando estiver desabilitado */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.modern-bot-toggle-input:disabled + .modern-bot-toggle .toggle-slider {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Responsividade */
@media (max-width: 768px) {
    .modern-bot-toggle-container {
        margin: 0 10px;
    }
    
    .modern-bot-toggle {
        gap: 8px;
        padding: 4px 10px 4px 4px;
        height: 32px;
    }
    
    .toggle-track {
        width: 38px;
        height: 22px;
    }
    
    .toggle-slider {
        width: 18px;
        height: 18px;
        top: 2px;
        left: 2px;
    }
    
    .modern-bot-toggle-input:checked + .modern-bot-toggle .toggle-slider {
        transform: translateX(16px);
    }
    
    .toggle-label {
        font-size: 12px;
    }
    
    .toggle-status {
        font-size: 9px;
        padding: 2px 6px;
    }
    
    .toggle-content {
        gap: 6px;
    }
    .toggle-status {
        padding: 2px 6px;
    }
    
    .toggle-icon {
        font-size: 11px;
    }

    .header .logo {
        width: 118px !important;
        margin-left: 6px !important;
    }

    .header .modern-bot-toggle-container {
        margin: 0 6px !important;
    }

    .header .modern-bot-toggle {
        height: 30px;
        gap: 6px;
        padding: 3px 8px 3px 3px;
    }

    .header .modern-bot-toggle .toggle-track {
        width: 34px;
        height: 20px;
    }

    .header .modern-bot-toggle .toggle-slider {
        width: 16px;
        height: 16px;
    }

    .header .modern-bot-toggle-input:checked + .modern-bot-toggle .toggle-slider {
        transform: translateX(14px);
    }

    .header .modern-bot-toggle .toggle-label {
        display: none;
    }

    .header .modern-bot-toggle .toggle-content {
        gap: 4px;
    }

    .header .modern-bot-toggle .toggle-status {
        font-size: 8px;
        padding: 1px 5px;
    }

    .header .notification-btn {
        margin-right: 0 !important;
    }
}

@media (max-width: 480px) {
    .header .logo {
        width: 108px !important;
        margin-left: 4px !important;
    }

    .header .modern-bot-toggle .toggle-status {
        display: none;
    }
}


.header .logo {
    width: 150px; /* Tamanho da logo */
    height: auto; 
    margin-left: 50px; /* Espaçamento da logo à esquerda */
}
.header a {
    margin-right: 20px; /* Espaçamento entre links à direita */
    color: #333; 
    text-decoration: none; 
}
.header-user-menu {
    position: relative; /* Para posicionar o menu suspenso do usuário */
    display: inline-block;
}

.user-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #17a2b8; /* Cor de fundo (tom de azul) */
    color: white; /* Cor das letras */
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-transform: uppercase; /* Deixa a letra em maiúscula */
}

.user-menu {
    display: none; /* Oculto inicialmente */
    position: absolute; 
    right: 0; /* Alinha ao lado direito do header-user-menu */
    background-color: #fff; 
    border: 1px solid #ddd; 
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1; 
    min-width: 200px; /* Largura mínima do menu */
    border-radius: 6px; /* Bordas arredondadas para um visual mais moderno */
    overflow: hidden; /* Garante que os cantos arredondados sejam respeitados */
}
.user-menu a {
    display: block; /* Garante que o link ocupe a linha toda */
    width: 100%; /* Ocupa toda a largura disponível */
    padding: 12px 16px; 
    text-decoration: none !important; 
    color: #333; 
    transition: background-color 0.2s ease-in-out; /* Transição suave no hover */
}
.user-menu a:hover {
    background-color: #e9ecef; /* Destaque no hover */
}

.notification-btn {
    position: relative; 
    margin-right: 20px; 
    color: #333; 
    cursor: pointer;
}
.notification-btn .badge {
    position: absolute; 
    right: -10px; 
    background-color: #dc3545; /* Vermelho do Bootstrap */
    color: #fff; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    font-weight: bold; 
    text-align: center; 
    line-height: 1; 
    margin-top: 5px; /* Ajusta este valor para descer o badge */
}
.notification-dropdown {
    display: none; /* Oculto por padrão */
    position: absolute; 
    right: 0; /* Alinha ao lado direito do notification-btn */
    top: 35px; /* Abaixo do sino */
    background-color: #fff; 
    min-width: 300px; /* Largura mínima */
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2); /* Sombra */
    z-index: 1000; 
    border-radius: 5px; 
    overflow: hidden; 
}
.notification-dropdown.active {
    display: block; /* Exibe quando ativo */
}
.notification-dropdown .notification-item {
    padding: 10px 15px; 
    border-bottom: 1px solid #ddd; 
    color: #333; 
    text-decoration: none; 
    display: block; 
}
.notification-dropdown .notification-item:last-child {
    border-bottom: none; /* Remove a borda do último item */
}
.notification-dropdown .notification-item:hover {
    background-color: #f8f9fa; /* Fundo claro no hover */
}
.notification-dropdown .notification-empty {
    padding: 15px; 
    text-align: center; 
    color: #666; 
}
.read-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: blue; /* Indicador de "não lido" */
    border-radius: 50%;
    margin-left: 5px;
}

.login-container {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: calc(100vh - 70px); 
    padding-top: 50px; 
    padding-bottom: 50px; 
}
.login-form {
    width: 100%;
}
.password-field {
    position: relative; 
}
.password-toggle {
    position: absolute; 
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%); 
    border: none; 
    background: none; 
    color: #aaa; 
    cursor: pointer; 
    padding: 0; 
    display: flex; 
    align-items: center; 
}
.password-toggle:hover {
    color: #666; 
}
.password-field input {
    padding-right: 40px; /* Espaço para o ícone de toggle */
}
.forgot-card-body {
    align-items: stretch !important;
}
.forgot-form {
    width: 100%;
}
.forgot-form .form-control {
    width: 100% !important;
}

.register-form {
    width: 100%;
}
.register-form .form-group {
    margin-bottom: 15px;
}
.register-form label {
    display: block;
    margin-bottom: 5px;
}
.register-form .form-control {
    width: 100% !important;
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
}
.register-form button {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.register-form button:hover {
    background-color: #0056b3;
}
.alert-custom {
    font-size: 1rem;
}

/* ================================
   PÁGINA INICIAL E CARDS
================================ */

/* 
   Estilos para componentes de Card
   (sombra suave, cantos arredondados, animação no hover).
*/
.card {
    border: none; 
    border-radius: 15px; 
    transition: transform 0.3s, box-shadow 0.3s;
}
.card-hover:hover {
    transform: translateY(-10px); 
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}
.card .icon {
    color: rgba(255, 255, 255, 0.7);
}
.card-title {
    font-weight: 500;
    margin-bottom: 10px;
}
.card-text {
    font-weight: 700;
}

.custom-product-card {
    border: 2px solid #ddd; /* Borda sutil para destacar */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: all 0.3s ease-in-out;
}

.custom-product-card:hover {
    box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.2); /* Sombra mais destacada no hover */
    transform: scale(1.02); /* Efeito sutil de crescimento ao passar o mouse */
}

.progress {
    height: 8px;
    border-radius: 4px;
}
.progress-bar {
    border-radius: 4px;
}
.card.bg-dark {
    background-color: #0097b2 !important; /* Cor de fundo escura custom */
    color: #ffffff; 
}
.card.bg-secondary {
    background-color: #725eea !important; /* Cor de fundo secundária custom */
    color: #ffffff;
}

/* 
   Responsividade para cards iniciais em telas menores.
*/
@media (max-width: 768px) {
    h1.display-4 {
        font-size: 2rem; /* Diminui o tamanho do título */
    }
    .card-text {
        font-size: 1.5rem; /* Diminui o texto dos cards */
    }
}

.custom-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #ffffff !important; /* Fundo branco */
    border: 1px solid #e0e0e0 !important; /* Borda sutil */
    margin-bottom: 1rem;
    margin-top: 5px;
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: 100% !important;
    width: 100% !important;


    overflow: hidden;
}

/* Header do container (padrão do projeto) — usado no view_complements.php */
.main-container{
  padding: 20px 24px;
}
.custom-card{
  overflow: hidden;
}
.custom-card-header{
  background: var(--fac-grad);
  padding: 14px 18px;
  text-align: center;
}
.custom-card-header h2{
  margin: 0;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .2px;
}
.custom-card-body{
  padding: 18px;
}

/* Compat: alguns cards usam classes do Bootstrap (card-header/card-body) dentro de .custom-card */
.custom-card .card-header{
  background: var(--fac-grad);
  padding: 14px 18px;
  text-align: center;
  border: none;
}
.custom-card .card-header h2{
  margin: 0;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .2px;
}
.custom-card .card-body{
  padding: 18px !important;
}




.custom-card-compact {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #ffffff !important; /* Fundo branco */
    border: 1px solid #e0e0e0 !important; /* Borda sutil */
    margin-bottom: 1rem;
    margin-top: 5px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-custom {
    font-size: 1.2rem;
    padding: 10px 25px;
    border-radius: 50px;
    transition: all 0.3s ease;
}
.btn-custom i {
    margin-right: 10px; /* Espaçamento entre ícone e texto */
}
.btn-custom:hover {
    transform: scale(1.05); /* Leve aumento no hover */
}
.btn-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Quebra linha se não couber em uma */
}
.status-indicator {
    position: absolute;
    top: 10px;
    right: 15px;
    display: flex;
    align-items: center;
}
.status-light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
}
.status-light.ativo {
    background-color: green; /* Indicador de ativo */
}
.status-light.inativo {
    background-color: red; /* Indicador de inativo */
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
}
.card-body-stretch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 15px;
}
.card-body form {
    width: 100%;
}
.card-header h2 {
    margin-bottom: 0;
}

.custom-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    display: none; /* Inicialmente oculto */
    justify-content: center;
    align-items: flex-start;
    padding: 40px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.custom-modal {
    backdrop-filter: none;
    transition: none;
}
.custom-modal.show {
    opacity: 1;
    visibility: visible;
}

.custom-modal-content {
    background-color: #fff;
    border-radius: 12px;
    padding: 25px;
    max-width: 900px;
    width: 90%;
    margin: auto;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    position: relative;
    transform: translateY(-20px);
    animation: slideDown 0.3s ease forwards;
}

/* 
   Animação de "deslizar para baixo" (slideDown).
*/
@keyframes slideDown {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    color: #333333;
}
.status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    padding: 4px 8px;
    background-color: #00c853;
    color: #fff;
    margin-right: 10px;
}
.modal-header .close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999999;
    transition: color 0.2s;
}
.modal-header .close-button:hover {
    color: #333333;
}

.order-details h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333333;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
    margin-top: 25px;
}

.order-details p {
    margin-bottom: 5px;
    font-size: 16px;
    color: #555555;
}
.order-details .customer-info,
.order-details .order-items,
.order-details .payment-info,
.order-details .delivery-info,
.order-details .order-origin {
    margin-bottom: 20px;
}
.order-details .order-items table {
    margin-top: 10px;
}
.order-summary {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    text-align: right;
}
.order-summary p {
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 16px;
    color: #333333;
}

.order-items .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.order-items .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.order-items .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333333;
}
.order-items .card-text {
    font-size: 0.95rem;
    color: #555555;
    margin-bottom: 0.5rem;
}
@media (max-width: 576px) {
    .order-items .card-title {
        font-size: 1rem;
    }
    .order-items .card-text {
        font-size: 0.9rem;
    }
}

.card.custom-card {
    margin-bottom: 1rem;
    border: 1px solid #ddd;

    border-radius: 20px;

    overflow: hidden;
}
.complement-card {
    transition: transform 0.2s;
    border: 1px solid #ddd;
}
.complement-card:hover {
    transform: scale(1.02);
}
.complements-grid > [class*="col-"] {
    display: flex;
}

.custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.whatsapp-help-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
}
.whatsapp-help-btn img {
    width: 50px; 
    height: 50px; 
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Sombra mais intensa */
    border-radius: 50%; /* Imagem circular */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.whatsapp-help-btn img:hover {
    transform: scale(1.1); /* Efeito de zoom no hover */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5); /* Sombra mais forte no hover */
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0; 
    width: 0; 
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: .4s;
    border-radius: 24px;
}
.slider:before {
    content: "";
    position: absolute;
    height: 18px; 
    width: 18px; 
    left: 3px; 
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
  background-color: #28a745; /* verde ao ligar */
}
input:checked + .slider:before {
  transform: translateX(18px);
}

@media (max-width: 768px) {
    /* Ajuste para colunas */
    .col-md-2, .col-md-3, .col-md-4, .col-md-6 {
        margin-bottom: 20px;
    }
    /* Ajuste para toolbar */
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .toolbar .toolbar-group {
        justify-content: center;
        width: 100%;
    }
}

.custom-card,
.custom-card:hover {
    transition: none !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

body {
    margin: 0; /* Remove margem padrão do navegador */
    padding: 0; /* Remove padding padrão do navegador */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Define a fonte principal */
    background: linear-gradient(135deg, #f0f4f8, #d9e2ec); /* Gradiente de fundo */
    transition: background 0.3s ease-in-out; /* Anima transição de cor de fundo */
    height: 100%;
    overflow: hidden; /* Impede rolagem desnecessária na página */
}

.card-header {
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px 20px 0 0;

    margin: -2px -2px 0 -2px;

    color: #fff !important;
}

.container {
    background: linear-gradient(135deg, #f3eefc 0%, #e8e3f0 100%); /* Lavanda + Cinza Claro */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #333333; /* Mantém boa legibilidade */
}

/* 
   Responsividade e espaçamento em grid
   para telas menores (até 992px).
*/
@media (max-width: 992px) {
    .col-lg-4 {
        margin-bottom: 15px;
    }
}

.toolbar {
    background-color: transparent;
    padding: 15px;
    display: flex;
    flex-wrap: nowrap; 
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.toolbar .toolbar-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

/* 
   Margem inferior reduzida para boxes de pedidos (order-box-small).
*/
.order-box-small {
    margin-bottom: 0.75rem;
}

.toolbar, .order-section {
    padding-left: 15px;
    padding-right: 15px;
}
.order-section {
    margin-top: 0px !important;
    padding-top: 0px;
}

/* 
   Badges para complementos gratuitos (free) ou pagos (paid).
*/
.badge-free {
    background-color: #ffc107; /* Amarelo (gratuito) */
    color: #212529;
}
.badge-paid {
    background-color: #28a745; /* Verde (pago) */
    color: #fff;
}

@media (max-width: 768px) {
    /* Oculta o botão fixo da sidebar em dispositivos móveis */
    .sidebar-toggle-btn {
        display: none;
    }

    /* Quando a sidebar NÃO estiver colapsada, 
       ela ocupa 100% da largura em dispositivos móveis */
    .sidebar:not(.collapsed) {
        width: 100%;
    }

    /* Em dispositivos móveis, o conteúdo não deve ter margem-left */
    .sidebar ~ .content {
        margin-left: 0 !important;
    }
}

/* Em telas a partir de 768px, aplica min-width na tabela wide-table */
@media (min-width: 768px) {
    .wide-table {
        min-width: 1200px;
    }
}

/* ===============================
   Barra de Ferramentas (Orders)
=============================== */
.orders-toolbar {
    background: linear-gradient(135deg, #e8d8f8 0%, #d7e7ff 100%);
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(96, 88, 165, 0.16);
    margin-bottom: 20px;
    box-shadow: 0 10px 24px rgba(67, 59, 126, 0.12);
}
.orders-toolbar .orders-toolbar-group {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.orders-toolbar #filter-status {
    min-width: 170px;
}

.orders-toolbar #search-order-number {
    min-width: 140px;
}

.orders-toolbar #search-client {
    min-width: 220px;
}

.orders-toolbar-top {
    display: none;
}

.orders-filters-collapse {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.orders-toolbar .form-select,
.orders-toolbar .form-control {
    height: 46px;
    border-radius: 12px;
    border: 1px solid #d6dff0;
    background: rgba(255, 255, 255, 0.94);
    font-size: 1.02rem;
    color: #2c3f57;
}

.orders-toolbar .form-select:focus,
.orders-toolbar .form-control:focus {
    border-color: #84a6ff;
    box-shadow: 0 0 0 .2rem rgba(88, 129, 255, 0.17);
}

.orders-filter-toggle {
    border-radius: 12px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #2e8dff 0%, #2962ff 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: .98rem !important;
    min-height: 38px;
    padding: 0 14px !important;
    box-shadow: 0 8px 18px rgba(41, 98, 255, 0.28);
}

.orders-toolbar #close-store,
.orders-toolbar #new-order,
.orders-toolbar #settings {
    border-radius: 12px !important;
    min-height: 46px;
}

.orders-toolbar #close-store {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #6f74d7 0%, #6f4fb8 100%);
}

.orders-toolbar #new-order {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #3ba5f6 0%, #18d1d7 100%);
}

.orders-toolbar #settings {
    border: 1px solid #d2d9e8 !important;
    background: #f7f8fc !important;
    color: #3b4e66 !important;
}

.orders-mobile-tabs {
    display: none;
}

.orders-mobile-tabs {
    background: #edf2ff;
    border: 1px solid #d8e2f6;
    border-radius: 14px;
    padding: 6px;
}

.orders-mobile-tab {
    border: 1px solid #d6dfef;
    background: #ffffff;
    color: #354861;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.15;
    transition: all .18s ease;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
}

.orders-mobile-tab i {
    font-size: .92rem;
}

.orders-mobile-tab.is-active {
    background: linear-gradient(135deg, #3e8dff 0%, #5f67ff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px rgba(49, 95, 255, 0.28);
}

@media (min-width: 992px) {
    .orders-filters-collapse.collapse {
        display: flex !important;
        height: auto !important;
        visibility: visible !important;
    }
}

/* ===============================
   Cartões de Pedidos
=============================== */
.orders-custom-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(154, 170, 197, 0.28);
    box-shadow: 0 12px 28px rgba(33, 56, 102, 0.15);
    margin-bottom: 1rem;
    transition: transform 0.3s, box-shadow 0.3s;
}
.orders-custom-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(33, 56, 102, 0.20);
}
.orders-card-header {
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    letter-spacing: 0.2px;
}

.orders-card-body {
    padding: 10px !important;
}

/* ===============================
   Cores personalizadas (Laranja, Azul, Verde)
   com gradientes suaves
=============================== */

/* Primeira coluna (Em Análise) - Agora em Laranja */
.custom-bg-orange {
    background: linear-gradient(135deg, #fd7e14 0%, #ffa84b 100%);
}
.custom-bg-light-orange {
    background: linear-gradient(135deg, #ffd8b1 0%, #ffe8d1 100%);
}

/* Segunda coluna (Em Produção) - Agora em Azul */
.custom-bg-blue {
    background: linear-gradient(135deg, #007bff 0%, #00a2ff 100%);
}
.custom-bg-light-blue {
    background: linear-gradient(135deg, #cce5ff 0%, #e6f3ff 100%);
}

/* Terceira coluna (Prontos para Entrega) - Mantendo Verde */
.custom-bg-green {
    background: linear-gradient(135deg, #28a745 0%, #54d86c 100%);
}
.custom-bg-light-green {
    background: linear-gradient(135deg, #c3e6cb 0%, #e0f3dd 100%);
}

/* ===============================
   Caixa de cada Pedido (order-box)
=============================== */
.order-box {
    border: 1px solid #dce3f0;
    border-radius: 14px;
    padding: 10px 10px 9px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(31, 45, 76, 0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    text-align: left; /* Alinha o texto à esquerda */
}
.order-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(31, 45, 76, 0.12);
}
.order-box-small {
    margin-bottom: 0.75rem;
}

.order-box.bg-warning-light {
    border-left: 4px solid #ff9800;
    background: linear-gradient(135deg, #fffefb 0%, #fff7ea 100%);
}

.order-box.bg-info-light {
    border-left: 4px solid #2196f3;
    background: linear-gradient(135deg, #fbfdff 0%, #eef7ff 100%);
}

.order-box.bg-success-light {
    border-left: 4px solid #2eb872;
    background: linear-gradient(135deg, #fbfffd 0%, #ecfff5 100%);
}

.order-box .order-title {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: #26364b;
}

.order-box .order-head-row {
    flex-wrap: wrap;
    gap: 8px;
}

.order-box .order-head-actions {
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: 6px;
}

.order-box .order-head-actions .btn {
    flex: 0 0 auto;
}

.order-box .order-head-actions .badge {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    max-width: 170px;
}

.order-box .badge {
    border-radius: 9px !important;
    font-size: .95rem;
    padding: 6px 10px !important;
}

.orders-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333333;
}

/* Botões do Bootstrap com fonte mais forte */
.btn-primary, .btn-success, .btn-info, .btn-danger {
    font-weight: 600;
}

/* Botões menores */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* ===============================
   Modal Personalizado (Detalhes do Pedido)
=============================== */
.orders-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    display: none; /* Inicialmente oculto */
    justify-content: center;
    align-items: flex-start;
    padding: 40px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.orders-modal.show {
    opacity: 1;
    visibility: visible;
}
.orders-modal-content {
    background-color: #fff;
    border-radius: 12px;
    padding: 25px;
    max-width: 900px;
    width: 90%;
    margin: auto;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    position: relative;
    transform: translateY(-20px);
    animation: slideDown 0.3s ease forwards;
}
/* Animação de "deslizar para baixo" (slideDown) */
@keyframes slideDown {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.orders-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.orders-modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    color: #333333;
}
.orders-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    padding: 4px 8px;
    background-color: #00c853; /* Verde-padrão */
    color: #fff;
    margin-right: 10px;
}
.orders-modal-header .orders-close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999999;
    transition: color 0.2s;
}
.orders-modal-header .orders-close-button:hover {
    color: #333333;
}

/* ===============================
   Detalhes do Pedido
=============================== */
.orders-details h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333333;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
    margin-top: 25px;
}
.order-box p {
    margin-bottom: 3px;
    font-size: .97rem;
    color: #4f6078;
    line-height: 1.2;
}

.orders-section .btn-print,
.orders-section .btn-cancel-order {
    border-radius: 10px !important;
    border: 1px solid #d7deeb !important;
    background: #fff !important;
    color: #2f445f !important;
    min-height: 32px;
}

.orders-section .btn-cancel-order {
    color: #c93131 !important;
}

.orders-section .btn-details,
.orders-section .btn-accept,
.orders-section .btn-ready,
.orders-section .btn-finalize {
    border: none !important;
    border-radius: 10px !important;
    min-height: 38px;
    font-size: .98rem;
    font-weight: 700;
}

.orders-section .btn-details {
    background: linear-gradient(135deg, #4fb1ee 0%, #1dd2d5 100%) !important;
}

.orders-section .btn-accept {
    background: linear-gradient(135deg, #24a867 0%, #198754 100%) !important;
}

.orders-section .btn-ready {
    color: #fff !important;
    background: linear-gradient(135deg, #00a6cc 0%, #1f9ce3 100%) !important;
}

.orders-section .btn-finalize {
    background: linear-gradient(135deg, #e25252 0%, #c93131 100%) !important;
}
.orders-summary {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    text-align: right;
}
.orders-summary p {
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 16px;
    color: #333333;
}

/* Fontes no modal */
.orders-details, .orders-summary {
    font-size: 16px;
}
.orders-details h3 {
    font-size: 18px;
}
.orders-details p {
    font-size: 16px;
}
.orders-summary p {
    font-size: 16px;
}

/* Data e hora do pedido */
.orders-date-time p {
    margin-bottom: 2px;
    font-size: 14px;
    color: #555555;
    line-height: 1.2;
}

/* ===============================
   Cards de Produtos no Modal
=============================== */
.orders-items .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    background: linear-gradient(135deg, #fff, #f9f9f9);
}
.orders-items .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.orders-items .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333333;
}
.orders-items .card-text {
    font-size: 0.95rem;
    color: #555555;
    margin-bottom: 0.5rem;
}
@media (max-width: 576px) {
    .orders-items .card-title {
        font-size: 1rem;
    }
    .orders-items .card-text {
        font-size: 0.9rem;
    }
}

/* ===============================
   Ajustes Responsivos
=============================== */
@media (max-width: 991.98px) {
    .orders-toolbar {
        flex-wrap: wrap;
        white-space: normal;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }

    .orders-toolbar-top {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .orders-filters-collapse {
        width: 100%;
        display: block;
        margin-top: 8px;
    }

    .orders-toolbar .orders-toolbar-group {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .orders-toolbar .orders-toolbar-group:first-child > .form-select,
    .orders-toolbar .orders-toolbar-group:first-child > .form-control {
        flex: 1 1 180px;
        min-width: 0;
        max-width: none !important;
        width: 100% !important;
    }

    .orders-toolbar .orders-toolbar-group:last-child {
        justify-content: flex-end;
    }

    .orders-filters-collapse .orders-toolbar-group + .orders-toolbar-group {
        margin-top: 10px;
    }

    .orders-mobile-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 12px;
    }

    .orders-section .orders-column {
        display: none;
    }

    .orders-section .orders-column.is-active {
        display: block;
    }
}

@media (max-width: 576px) {
    .orders-toolbar {
        padding: 9px;
        margin-bottom: 14px;
    }

    .orders-toolbar .orders-toolbar-group:first-child {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 8px;
    }

    .orders-toolbar .orders-toolbar-group:first-child > .form-select,
    .orders-toolbar .orders-toolbar-group:first-child > .form-control {
        width: 100% !important;
        min-width: 0 !important;
    }

    .orders-toolbar .orders-toolbar-group:last-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px;
        width: 100%;
        justify-content: stretch;
        align-items: stretch;
        gap: 8px;
        margin-top: 12px;
    }

    .orders-toolbar #close-store,
    .orders-toolbar #new-order {
        width: 100%;
        white-space: normal;
        line-height: 1.2;
    }

    .orders-toolbar #settings {
        width: 42px;
        padding-left: 0;
        padding-right: 0;
    }

    .orders-mobile-tab {
        font-size: .82rem;
        padding: 9px 6px;
    }

    .orders-filter-toggle {
        width: 100%;
    }

    .orders-toolbar-top {
        justify-content: stretch;
    }

    .order-box {
        border-radius: 13px;
    }

    .order-box .badge {
        font-size: .88rem;
        padding: 5px 8px !important;
    }

    .orders-section .btn-details,
    .orders-section .btn-accept,
    .orders-section .btn-ready,
    .orders-section .btn-finalize {
        min-height: 36px;
        font-size: .95rem;
    }
}

/* ===============================
   Badges para Complementos
=============================== */
.badge-free {
    background-color: #ffc107; /* Amarelo (gratuito) */
    color: #212529;
}
.badge-paid {
    background-color: #28a745; /* Verde (pago) */
    color: #fff;
}

/* Filtro de categorias à esquerda */
.category-filter {
    border-right: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

/* Ajuste de cabeçalho interno */
.page-header {
    margin-bottom: 1rem;
}
.page-header h2 {
    margin-bottom: 0.2rem;
}
.page-header p {
    margin-bottom: 0;
    color: #6c757d;
}

/* Imagem e preço do produto (caso não existam em styles.css) */
.product-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}
.product-price {
    color: #0084ff;
    font-weight: 600;
}

/* ===============================
   Fluxo de Pedidos
=============================== */

/*index.php*/
body {
    background-color: #f8f9fa;
}
.row-flex {
    display: flex;
}
.left-column {
    width: calc(100% - 400px);
    padding-right: 15px;
}
.right-column {
    background-color: #ffffff;
    border-left: 1px solid #ddd;
    /* Defina um espaçamento equivalente à altura do cabeçalho */
    position: fixed;
    top: 50px; /* Ajuste este valor conforme a altura do seu header */
    right: 0;
    width: 400px;
    height: calc(100vh - 70px); /* Ajusta a altura para compensar o top */
    padding: 1rem;
    overflow-y: auto;
}
.product-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
    transition: box-shadow 0.2s;
    background-color: #fff; /* Fundo branco do card */
}
.product-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.product-image {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
}
.product-card .product-price {
    font-weight: 600;
    color: #333;
}
.product-card .text-muted {
    font-size: 0.875rem;
}
.product-card h3 {
    font-size: 1.1rem;
}
/* Estilos para o carrinho na sidebar */
.order-summary-header {
    font-weight: 600;
    margin-bottom: 1rem;
}
.cart-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-bottom: 15px;
}
.cart-item:last-child {
    border-bottom: none;
}
.cart-item .item-title {
    font-weight: 600;
    margin: 0;
}
.cart-item .item-sub {
    color: #6c757d;
    font-size: 0.9rem;
}
.cart-item-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.cart-item-actions form {
    display: inline-block;
}
.cart-item-actions button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.cart-item-price {
    font-weight: 600;
}

/*product-details.php*/
.page-content {
    padding-bottom: 100px;
}
.container-fluid {
    max-width: 1400px;
}
.page-content {
    padding-bottom: 100px;
}
.container-fluid {
    max-width: 1400px;
}
/* Estilos do Produto */
.product-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.product-subtitle {
    color: #6c757d;
    margin-bottom: 1rem;
}
.product-price {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0d6efd;
    margin-bottom: 1.5rem;
}
.product-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}
.complements-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
}
.complements-section p {
    font-size: 0.95rem;
    color: #555;
}
.list-group-item {
    border: 1px solid #ddd;
    margin-bottom: 5px;
    border-radius: 4px;
}
.list-group-item .img-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}
/* Botões fixos no rodapé */
.footer-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}
.buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
}
.buttons-container .btn {
    flex: 1;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* <--- Título Carrinho adicionado no topo do sidebar ---> */
.sidebar-header {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}
.order-summary-total {
    font-weight: 600;
    font-size: 1.1rem;
}
.observation-field textarea {
    resize: none;
}
.char-counter {
    font-size: 0.85rem;
    color: #6c757d;
}
/* Modal de confirmação */
.modal-image {
    width: 50%;
    display: block;
    margin: 0 auto 1rem auto;
}
.quantity-control {
    display: flex;
    align-items: center;
    gap: 10px;
}
.quantity-control form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.quantity-control button {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-size: 1.2rem;
    padding: 0;
    transition: background-color 0.2s;
}
.quantity-control button:hover {
    background-color: #f8f9fa;
}
/* Modal de edição (mostrando categorias e produtos) */
.category-filter-btn {
    margin-right: 5px;
    margin-bottom: 5px;
}
.edit-product-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: #fff;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.edit-product-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.edit-product-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.edit-product-body {
    padding: 8px;
    text-align: center;
}
.edit-product-title {
    font-size: 1rem;
    font-weight: 600;
}
.edit-product-price {
    color: #0d6efd;
    font-weight: 500;
    margin-top: 4px;
}
.d-none { display: none !important; }

/* order_summary.php */
.order-summary-cart {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    text-align: center;
    max-width: 1300px;
    margin: 5px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.order-summary-cart h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: #333;
}
/* order_summary.php */
.order-summary-cart {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    text-align: center;
    max-width: 1300px;
    margin: 5px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.order-summary-cart h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: #333;
}
.cart-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-bottom: 15px;
}
.cart-item:last-child {
    border-bottom: none;
}
.item-title {
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    text-align: left;
}
.item-details {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 8px;
    text-align: left;
}
.complementos-list {
    list-style: none;
    padding-left: 0;
    margin: 5px 0;
    color: #666;
    font-size: 0.9rem;
    text-align: left;
}
.complementos-list li {
    margin-bottom: 4px;
    text-align: left;
}
.item-price {
    font-size: 1rem;
    color: #333;
    margin-top: 8px;
    text-align: left;
}
.quantity-control button:hover {
    background-color: #f8f9fa;
}
.quantity-control .btn-outline-danger {
    color: #dc3545;
    border: 1px solid #dc3545;
}
.quantity-control .btn-outline-danger:hover {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}
.quantity-control span {
    min-width: 20px;
    text-align: center;
    color: #333;
}
.trash-button {
    color: #666;
    font-size: 1.1rem;
}
.adicionar-observacao {
    color: #0d6efd;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-block;
    margin-top: 4px;
}
.adicionar-observacao:hover {
    text-decoration: underline;
}
/* confirm_order.php */
#content-area.content-confirm-order {
    padding-top: 8px !important;
}

#content-area.content-confirm-order .confirm-order-shell {
    margin-top: 0 !important;
    padding-top: 4px;
}

#content-area.content-confirm-order .confirm-order-shell > .row {
    margin-top: 0 !important;
}

#content-area.content-confirm-order .confirm-order-shell .card {
    margin-top: 0 !important;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.selected-address {
    background-color: #f8f9fa;
    color: #333;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #28a745;
}

.selected-payment {
    background-color: #f8f9fa;
    color: #333;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #28a745;
}
.btn-home {
    margin-top: 30px;
}
#changeModal .modal-body p {
    font-size: 1.1rem;
}
@media (max-width: 576px) {
    .address-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .address-actions a {
        width: 100%;
        margin-top: 5px;
    }
}

.form-check {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.form-check-input {
    margin-top: 0.5rem;
    margin-right: 0.5rem;
}

.form-check-label {
    margin-bottom: 0;
    flex: 1;
}

.address-actions {
    display: flex;
    gap: 0.5rem;
}
.card-body-order {
    width: 100% !important;    /* Garante ocupar toda a largura disponível */
    max-width: 100% !important;/* Remove qualquer limite de largura */
    background-color: #fff;    /* Fundo branco (opcional) */
    padding: 20px;             /* Espaçamento interno */
    border-radius: 8px;        /* Cantos arredondados */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra suave (opcional) */
    margin: 0 auto;            /* Centraliza, se necessário */
}
.card-body-order form {
    width: 100%;
}
.custom-card .card {
    border-radius: 20px;
}

/* Ensures gradient/card headers have white heading text */
.card-header h1,
.card-header h2,
.card-header h3,
.gradient-header h1,
.gradient-header h2,
.gradient-header h3 {
    color: #fff !important;
}

/* === Overrides específicos para o modal de pedidos === */
.orders-modal-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.orders-modal-header #order-details-title {
    font-size: 24px;
    font-weight: 700;
}

.orders-modal-header .orders-status-badge {
    font-size: 14px;
}
.orders-modal-header-top {
    margin-bottom: 4px;
}
/* Espaçamento entre o título "Pagamento" e os detalhes */
.payment-info p {
    margin-top: 8px;
}

/* === Correções específicas para Pagamento no modal de pedidos === */
.orders-details .payment-info,
.order-details .payment-info {
    display: block;              /* Garante bloco, não flex */
}

.orders-details .payment-info h3,
.orders-details .payment-info p,
.order-details .payment-info h3,
.order-details .payment-info p {
    display: block;              /* Cada elemento em sua própria linha */
}

/* ======================================================================
   Custom sidebar design (inspired by provided mock‑up)
   These overrides adjust only the sidebar styling while leaving the rest
   of the application untouched. They are appended at the end of the
   stylesheet to ensure precedence over earlier declarations.
   ====================================================================== */

/* Sidebar background with dotted overlay and gradient */
.sidebar {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, #0D043A, #2E0E51);
    background-size: 6px 6px, auto;
    background-repeat: repeat, no-repeat;
    color: #E5E3F2;
}

/* General menu item appearance */
.sidebar a {
    /* Maintain flex layout and spacing defined earlier but refine colours */
    color: #E5E3F2 !important;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    margin: 4px 8px;
    display: flex;
    align-items: center;
    padding: 12px 20px;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Icon styling within sidebar links */
.sidebar a i {
    margin-right: 12px;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 1rem;
    transition: color 0.2s ease;
}

/* Hover state */
.sidebar a:hover {
    background-color: #362E73;
    color: #FFFFFF !important;
}
.sidebar a:hover i {
    color: #FFFFFF !important;
}

/* Active (current) state */
.sidebar a.active {
    background-image: linear-gradient(90deg, #2FA9E2, #7764D1);
    color: #FFFFFF !important;
}
.sidebar a.active i {
    color: #FFFFFF !important;
}

/* ======================================================================
   Sidebar colapsada (modo ícones) — Desktop
   Mantém a sidebar visível com largura menor e exibe somente os ícones.
   No mobile, o comportamento antigo (recolher totalmente) continua.
   ====================================================================== */

:root {
    --sidebar-expanded-width: 270px;
    --sidebar-collapsed-width: 78px;
}

@media (min-width: 768px) {
    /* Largura reduzida ao colapsar */
    .sidebar.collapsed {
        width: var(--sidebar-collapsed-width) !important;
    }

    /* Garante que a lista principal continue visível (para os ícones aparecerem) */
    .sidebar.collapsed ul,
    .sidebar.collapsed ul li {
        display: block !important;
    }

    /* Esconde submenus no modo colapsado */
    .sidebar.collapsed .submenu {
        display: none !important;
    }

    /* Ajusta padding do UL para caber na largura menor */
    .sidebar.collapsed ul.nav {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Esconde o texto do link sem precisar alterar o HTML (font-size 0) */
    .sidebar.collapsed ul li > a {
        justify-content: center;
        padding: 12px 0;
        font-size: 0 !important;
    }

    /* Mantém ícones visíveis e centralizados */
    .sidebar.collapsed ul li > a i {
        margin-right: 0 !important;
        font-size: 1.2rem !important;
    }

    /* Conteúdo acompanha a nova largura colapsada */
    .sidebar.collapsed ~ .content {
        margin-left: var(--sidebar-collapsed-width) !important;
    }
}

@media (max-width: 767.98px) {
    /* No mobile, mantém o comportamento antigo: recolhe totalmente */
    .sidebar.collapsed {
        width: 0 !important;
    }
    .sidebar.collapsed ul,
    .sidebar.collapsed ul li,
    .sidebar.collapsed .submenu {
        display: none !important;
    }
    .sidebar.collapsed ~ .content {
        margin-left: 0 !important;
    }
}

/* ======================================================================
   Botão do perfil (header) — mesma paleta da sidebar
   ====================================================================== */

.user-button {
    background: linear-gradient(135deg, #2FA9E2, #7764D1) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.user-button:hover {
    filter: brightness(1.05);
}



/* === FacilitAI container (conteúdo das páginas) =========================
   Padrão: azul claro -> azul escuro -> lilás (SEM rosa)
   Não altera header/sidebar/base; apenas classes novas.
   ===================================================================== */
:root{
  --fac-grad: linear-gradient(90deg, #45C4FF 0%, #2D5BFF 45%, #8A78FF 100%);
--fac-card-radius: 22px;
  --fac-card-shadow: 0 16px 45px rgba(17, 24, 39, 0.10);
  --fac-card-border: 1px solid rgba(15, 23, 42, 0.06);
  --fac-bar-h: 38px; /* topo colorido bem menor */
}

.fac-page{
  padding: 10px 12px 18px;
}

.fac-card{
  background: #fff;
  border-radius: var(--fac-card-radius);
  box-shadow: var(--fac-card-shadow);
  border: var(--fac-card-border);
  overflow: hidden;
}

.fac-card__bar{
  height: var(--fac-bar-h);
  background: var(--fac-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}

.fac-card__bar .fac-card__title{
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.05rem;
  line-height: 1;
}

.fac-card__body{
  padding: 22px;
}

@media (max-width: 768px){
  .fac-card__body{ padding: 16px; }
  .fac-card__bar{ height: 36px; }
  .fac-card__bar .fac-card__title{ font-size: 1rem; }
}

/* Status badge (bot) */
.fac-status{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 30px rgba(17,24,39,.08);
}

.fac-status__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(46, 212, 255, .15);
}

.fac-status__dot.ativo{ background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.fac-status__dot.inativo{ background: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,.18); }

.fac-status__text{
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: .92rem;
  color: #0f172a;
}

/* Botões com gradiente */
.btn-fac-primary{
  background: var(--fac-grad);
  border: none;
  color: #fff !important;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(29, 78, 216, .18);
}
.btn-fac-primary:hover{ filter: brightness(1.03); transform: translateY(-1px); }

/* Botão secundário (colorido) — usado no "Atualizar Status" */
.btn-fac-secondary{
  background: linear-gradient(90deg, #38bdf8, #6366f1);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.12);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-fac-secondary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.14);
}
.btn-fac-secondary:active{
  transform: translateY(0);
}



.btn-fac-green{
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  border: none;
  color: #fff !important;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(34, 197, 94, .18);
}
.btn-fac-green:hover{ filter: brightness(1.03); transform: translateY(-1px); }

.btn-fac-outline{
  background: linear-gradient(90deg, rgba(56,189,248,0.18), rgba(168,85,247,0.18));
  border: 1px solid rgba(99,102,241,0.35);
  color: #0f172a !important;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06);
}
.btn-fac-outline:hover{
  background: linear-gradient(90deg, rgba(56,189,248,0.28), rgba(168,85,247,0.28));
  border-color: rgba(99,102,241,0.55);
}

/* Botão de desativar (vermelho) */
.btn-fac-danger{
  background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%);
  border: none;
  color: #fff !important;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(239, 68, 68, .18);
}
.btn-fac-danger:hover{ filter: brightness(1.03); transform: translateY(-1px); }

/* Auto-padronização de cards Bootstrap dentro do conteúdo
   (para não precisar editar todas as páginas antigas) */
#content-area .card{
  border-radius: var(--fac-card-radius);
  box-shadow: var(--fac-card-shadow);
  border: var(--fac-card-border);
  overflow: hidden;
}

#content-area .card > .card-header{
  background: var(--fac-grad) !important;
  color: #fff !important;
  border-bottom: none !important;
  padding: 10px 16px !important;
  text-align: center;
}

#content-area .card > .card-header h1,
#content-area .card > .card-header h2,
#content-area .card > .card-header h3,
#content-area .card > .card-header h4,
#content-area .card > .card-header h5{
  margin: 0 !important;
  color: #fff !important;
  font-weight: 800 !important;
}


/* Grid cards (produtos etc) */
.fac-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.fac-item{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
  overflow: hidden;
  position: relative;
  height: 100%;
}

.fac-item__top{
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(69, 196, 255, 0.22), rgba(138, 120, 255, 0.16));
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fac-item__body{
  padding: 14px;
}

.fac-item__meta{
  color: rgba(15, 23, 42, 0.72);
  font-size: .92rem;
}

.fac-item__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.fac-btn-icon{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
}

.fac-btn-icon.btn-sm{
  padding: 6px 12px;
  font-weight: 800;
}

.fac-icon-only{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fac-table-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fac-search{
  max-width: 360px;
}

/* Status dot (bot/whatsapp) */
.fac-status-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.06);
}
.fac-status-dot.on{ background: #22c55e; }
.fac-status-dot.off{ background: #f97316; }


/* =====================================================
   PRODUTOS — CARDS EM GRID (ADMIN)
   ===================================================== */
.fac-products-grid{
  --prod-card-w: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--prod-card-w), var(--prod-card-w)));
  gap: 20px;
  justify-content: center; /* 1 card não estica */
  align-items: start;
}

.fac-prod-card{
  width: var(--prod-card-w);
  max-width: var(--prod-card-w);
  background: rgba(255,255,255,0.90);
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.60);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(10px);
}

.fac-prod-card__top{
  padding: 10px 12px;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  color: #fff;
  font-weight: 900;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.fac-prod-card__body{
  padding: 14px 14px 12px;
  text-align: center;
}

.fac-prod-card__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.fac-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #0f172a;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(99,102,241,0.18);
}

.fac-pill--ok{
  color: #065f46;
  background: rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.28);
}

.fac-pill--off{
  color: #7c2d12;
  background: rgba(251,146,60,0.18);
  border-color: rgba(251,146,60,0.28);
}

.fac-icon-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(99,102,241,0.18);
  color: #ef4444;
  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.18);
  text-decoration: none;
}

.fac-icon-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(239, 68, 68, 0.22);
  color: #ef4444;
}

.fac-prod-card__thumb{
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  /* quadrinho da imagem (sombra suave) */
  box-shadow:
    0 14px 30px rgba(2, 6, 23, 0.12),
    inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.fac-prod-card__thumb img{
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  display: block;
}

.fac-prod-card__name{
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.25;
}

.fac-prod-card__price{
  margin: 6px 0 0;
  font-weight: 900;
  color: #10b981;
  font-size: 1.05rem;
}

/* Ações: mantém "como antes", mas adapta para o card estreito */
.fac-prod-card__actions{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-content: center;
}

.fac-prod-card__actions .btn{
  width: 100%;
  min-width: 0;
  border-radius: 999px;
  padding: 10px 10px;
  font-weight: 900;
  font-size: 0.86rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fac-prod-card__actions .btn i{
  margin-right: 6px;
}

.fac-prod-card__actions form{
  grid-column: 1 / -1; /* Desativar/Ativar ocupa a linha inteira */
  margin: 0;
}

.fac-prod-card__actions form .btn{
  width: 100%;
}

.fac-prod-card__subaction{
  margin-top: 10px;
  font-size: 0.82rem;
}

.fac-prod-card__subaction a{
  color: #374151;
  text-decoration: none;
  font-weight: 800;
}

.fac-prod-card__subaction a:hover{
  color: #111827;
  text-decoration: underline;
}
/* ============================================================
   PATCH (2026-02-11) — Produtos (view_products.php)
   Mantém SOMENTE o título no topo e remove sombra do quadrinho da imagem
   (não altera outros estilos existentes)
============================================================ */
.fac-prod-card__thumb{
    box-shadow: none !important;
}
.fac-prod-card__thumb img{
    box-shadow: none !important;
    filter: none !important;
}
.fac-prod-card__name{
    display: none !important;
}

/* ============================================================
   PATCH (2026-02-12) — Carrinho (index.php + order_summary.php)
   Corrige altura da sidebar, sticky footer do botão e miniaturas
============================================================ */
.row-flex.cart-layout{
    align-items: stretch;
}
.row-flex.cart-layout .left-column{
    flex: 0 0 auto;
    width: calc(100% - 400px);
    min-width: 0;
}
.row-flex.cart-layout .right-column{
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
    width: 400px;
}
.cart-sidebar{
    display: flex;
    flex-direction: column;
}
.cart-sidebar .cart-sidebar-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.cart-sidebar .cart-items{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.cart-sidebar .cart-sidebar-footer{
    margin-top: auto;
}

/* Miniaturas do carrinho */
.cart-sidebar .cart-item img,
.cart-sidebar .cart-item .cart-item-thumb,
.cart-items .cart-item img,
.cart-items .cart-item .cart-item-thumb,
.order-summary-cart .cart-item-thumb{
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}
.order-summary-cart .cart-item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.order-summary-cart .cart-item .d-flex{
    flex: 1 1 auto;
    min-width: 0;
}
.order-summary-cart .cart-item-thumb.placeholder{
    background: #f1f3f5;
    border: 1px solid #e5e7eb;
}

/* ============================================================
   PATCH (2026-03-02) — index.php
   Cards de produto no estilo lista (referência visual do usuário)
============================================================ */
.order-index-page .order-products-grid > [class*="col-"]{
    display: flex;
}

.order-index-page .order-product-link{
    width: 100%;
}

.order-index-page .order-product-card{
    width: 100%;
    border: 1px solid #d7dde5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
    padding: 12px 14px !important;
    min-height: 130px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.order-index-page .order-product-card:hover{
    border-color: #c3ccd8;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.order-index-page .order-product-card .row{
    margin: 0;
    width: 100%;
}

.order-index-page .order-product-card .row > .col,
.order-index-page .order-product-card .row > .col-auto{
    padding-left: 0;
    padding-right: 0;
}

.order-index-page .order-product-card h3{
    margin: 0 0 6px 0 !important;
    font-size: 1.05rem;
    line-height: 1.28;
    font-weight: 700;
    color: #2a3441;
}

.order-index-page .order-product-card .text-muted{
    display: none;
}

.order-index-page .order-product-card .product-price{
    margin: 0 !important;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    color: #374151 !important;
}

.order-index-page .order-product-card .product-image{
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #dfe5ec;
    margin-left: 14px;
    flex: 0 0 112px;
}

.order-index-page .order-product-card .product-image.bg-light{
    width: 112px;
    height: 112px;
    margin-left: 14px;
    border-radius: 10px;
    border: 1px solid #dfe5ec;
    color: #8ca0b6 !important;
}

@media (max-width: 767.98px){
    .order-index-page .order-product-card{
        min-height: 116px;
        padding: 10px 12px !important;
    }

    .order-index-page .order-product-card .product-image,
    .order-index-page .order-product-card .product-image.bg-light{
        width: 92px;
        height: 92px;
        flex-basis: 92px;
        margin-left: 10px;
    }

    .order-index-page .order-product-card h3{
        font-size: 1rem;
    }

    .order-index-page .order-product-card .product-price{
        font-size: 1.85rem;
    }
}

/* ============================================================
   PATCH (2026-02-12) — Sidebar scroll + hover expand
============================================================ */
.sidebar{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.sidebar-top{
    flex: 0 0 auto;
    padding: 12px 12px 0;
}
.sidebar-brand{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.sidebar-logo-img{
    max-width: 150px;
    height: auto;
    display: block;
}
.sidebar-menu{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sidebar-bottom{
    flex: 0 0 auto;
}
.sidebar-bottom .nav{
    padding-top: 0;
}

.sidebar.is-collapsed{
    width: var(--sidebar-collapsed-width);
}
.sidebar.is-collapsed.is-hover-open,
.sidebar.collapsed.is-hover-open{
    width: var(--sidebar-expanded-width) !important;
}
.sidebar.is-collapsed.is-hover-open ul li > a{
    font-size: 0.95rem !important;
    justify-content: flex-start !important;
    padding: 12px 20px !important;
}
.sidebar.is-collapsed.is-hover-open ul li > a i{
    margin-right: 12px !important;
    font-size: 1rem !important;
}
.sidebar.is-collapsed.is-hover-open .menu-item.open > .submenu{
    display: block !important;
}
.sidebar.is-collapsed.is-hover-open ~ .content{
    margin-left: var(--sidebar-expanded-width) !important;
}

/* Garante visibilidade do hambúrguer no header em todas as páginas */
@media (min-width: 768px){
    #sidebarToggle{
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   Assinatura — ajustes de compactação (evita corte de conteúdo)
============================================================ */
.subscription-page{
    height: auto !important;
    min-height: calc(100vh - 40px);
    overflow: visible !important;
    padding: 16px 18px 28px !important;
}
.subscription-shell{
    overflow: visible !important;
    padding: 18px 20px 20px !important;
}
.subscription-grid{
    gap: 18px !important;
    align-items: stretch;
}
.plan-card{
    min-height: 0;
}
.plan-card__top{
    padding: 30px 18px 14px !important;
}
.plan-title{
    font-size: 1.35rem !important;
}
.plan-price{
    font-size: 1.9rem !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}
.plan-features{
    gap: 6px !important;
}
.plan-features li{
    font-size: 0.85rem !important;
}
.plan-card__footer{
    padding: 10px 18px 16px !important;
}
.plan-card.is-current{
    transform: none !important;
}
.subscription-help{
    margin-top: 18px !important;
}

/* ============================================================
   Assinatura — correções de corte e largura total do conteúdo
============================================================ */
.subscription-shell{
    max-width: 100% !important;
    width: 100% !important;
}
.plan-card{
    overflow: hidden !important;
}
.plan-card__top{
    border-radius: 20px 20px 0 0;
    padding-top: 46px !important;
    overflow: visible;
}
.plan-card__top .plan-icon{
    top: 10px !important;
}

/* Sidebar: evita cortar o item "Sair" no fundo */
.sidebar{
    height: calc(100vh - 40px) !important;
}
.sidebar-menu{
    padding-bottom: 12px;
}
.sidebar-bottom{
    padding-bottom: 16px;
}

/* ============================================================
   Assinatura — compactação final para caber sem rolagem
============================================================ */
.subscription-page{
    padding: 12px 14px 18px !important;
}
.subscription-hero{
    margin-bottom: 10px !important;
}
.subscription-hero h2{
    font-size: 2.1rem !important;
}
.subscription-shell{
    padding: 16px 18px 14px !important;
}
.subscription-grid{
    gap: 14px !important;
}
.plan-card__top{
    padding: 38px 16px 10px !important;
}
.plan-title{
    font-size: 1.25rem !important;
}
.plan-card__body{
    padding: 14px 18px 6px !important;
}
.plan-price{
    font-size: 1.75rem !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
}
.plan-features{
    gap: 5px !important;
}
.plan-features li{
    font-size: 0.82rem !important;
}
.plan-card__footer{
    padding: 8px 18px 12px !important;
}
.plan-btn{
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
}
.subscription-help{
    margin-top: 12px !important;
    padding: 10px 14px !important;
}

/* Sidebar — desce um pouco o link Sair sem cortar */
.sidebar{
    height: calc(100vh - 40px) !important;
}
.sidebar-menu{
    padding-bottom: 4px !important;
}
.sidebar-bottom{
    margin-top: auto;
    padding-bottom: 6px !important;
}

/* ============================================================
   Assinatura — ícone ao lado do nome e sem rolagem
============================================================ */
.plan-card__top{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px 20px 0 0;
}
.plan-header-row{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.plan-card__top .plan-icon{
    position: static !important;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    margin: 0;
}
.plan-card__top .plan-icon i{
    font-size: 1.05rem;
}
.plan-title{
    margin: 0;
    line-height: 1;
}

body.page-subscription .content{
    overflow-y: hidden;
}
body.page-subscription .subscription-page{
    height: 100%;
    min-height: 0;
}

/* ============================================================
   Assinatura — itens bloqueados
============================================================ */
.premium-locked{
    position: relative;
}
.premium-badge{
    color: #fbbf24 !important;
    margin-left: auto;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}
.sidebar a .premium-badge {
    color: #fbbf24 !important;
}
.sidebar a:hover .premium-badge {
    color: #fbbf24 !important;
}
.menu-label{
    margin-left: 8px;
}

/* ============================================================
   Assinatura — visual moderno com glassmorphism
============================================================ */
.subscription-page{
    padding: 16px 20px;
    height: 100vh;
    background: linear-gradient(135deg, 
        #e0e7ff 0%, 
        #f3e8ff 25%, 
        #dfe9ff 50%,
        #e5deff 75%,
        #ede9fe 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.subscription-page::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(167, 139, 250, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(196, 181, 253, 0.12) 0%, transparent 50%);
    pointer-events: none;
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(5deg); }
    66% { transform: translate(-20px, 20px) rotate(-5deg); }
}

.subscription-hero{
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.subscription-hero h2{
    font-weight: 700;
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.subscription-hero p{
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.subscription-shell{
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.subscription-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    flex: 1;
}

/* Cards de planos com glassmorphism */
.plan-card{
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 8px 32px rgba(31, 38, 135, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.plan-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.plan-card:hover{
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(31, 38, 135, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.plan-card:hover::before {
    opacity: 1;
}

/* Topo dos cards com gradientes específicos */
.plan-card__top{
    padding: 16px 20px 16px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.plan-card__top::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, 20px); }
}

.plan-card__top .plan-icon{
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.plan-title{
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    margin: 0;
}

.plan-status{
    position: absolute;
    right: 14px;
    top: 14px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.plan-card__body{
    padding: 18px 20px;
    flex: 1;
}

.plan-price{
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 14px;
    line-height: 1;
}

.plan-price span{
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.plan-features{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plan-features li{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 2px 0;
}

.plan-features i{
    color: #22c55e;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.plan-features li.disabled {
    opacity: 0.4;
}

.plan-features li.disabled i {
    color: #94a3b8;
}

.plan-card__footer{
    padding: 0 20px 18px;
}

.plan-btn{
    width: 100%;
    border: none;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 10px;
    color: #fff;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.plan-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

/* Cores específicas para cada plano (Básico = Azul) */
.plan-card--essential .plan-card__top,
.plan-card--basic .plan-card__top{
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.plan-card--essential .plan-btn,
.plan-card--basic .plan-btn{
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

/* PRO = Roxo */
.plan-card--pro .plan-card__top{
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

.plan-card--pro .plan-btn{
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

/* Premium/VIP = Dourado */
.plan-card--premium .plan-card__top,
.plan-card--vip .plan-card__top{
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.plan-card--premium .plan-btn,
.plan-card--vip .plan-btn{
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

/* Card ativo com destaque */
.plan-card.is-current{
    transform: scale(1.02);
    box-shadow: 
        0 20px 60px rgba(31, 38, 135, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.plan-card.is-current:hover {
    transform: scale(1.02) translateY(-4px);
}

/* Botão desabilitado do plano atual */
.plan-card .btn-outline-secondary {
    background: #e2e8f0;
    color: #64748b;
    border: 2px solid #cbd5e1;
    box-shadow: none;
}

/* Seção de ajuda */
.subscription-help{
    position: relative;
    z-index: 1;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.subscription-help__text{
    color: #475569;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.subscription-help__text i {
    font-size: 1.2rem;
    color: #64748b;
}

.subscription-help__btn{
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 8px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}

.subscription-help__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(16, 185, 129, 0.4);
    color: #fff;
    text-decoration: none;
}

/* Responsividade */
@media (max-width: 992px) {
    .subscription-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
    }
    
    .subscription-hero h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .subscription-page {
        padding: 30px 16px;
    }
    
    .subscription-grid {
        grid-template-columns: 1fr;
    }
    
    .plan-card.is-current {
        transform: scale(1);
    }
}

/* ============================================================
   Assinatura — igual à referência (override v2)
   (Mantém o escopo só em .subscription-* / .plan-* para não afetar outras telas)
============================================================ */

.subscription-page{
    padding: 22px 28px;
    min-height: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 55%),
        radial-gradient(circle at 85% 15%, rgba(167,139,250,0.35) 0%, rgba(167,139,250,0) 60%),
        radial-gradient(circle at 90% 85%, rgba(96,165,250,0.25) 0%, rgba(96,165,250,0) 62%),
        linear-gradient(135deg, #dbeafe 0%, #ede9fe 55%, #dbeafe 100%);
    position: relative;
    overflow: hidden;
}

.subscription-page::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.70) 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1.8px),
        radial-gradient(circle, rgba(255,255,255,0.30) 1px, transparent 2px);
    background-size: 120px 120px, 180px 180px, 260px 260px;
    background-position: 0 0, 40px 90px, 90px 40px;
    opacity: 0.8;
    pointer-events: none;
    animation: subscriptionStars 18s linear infinite;
}

@keyframes subscriptionStars{
    0%{ transform: translate3d(0,0,0); }
    100%{ transform: translate3d(-22px, -18px, 0); }
}

/* Painel grande (como na imagem) */
.subscription-shell{
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    z-index: 1;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 28px;
    padding: 26px 28px 22px;
    box-shadow: 0 18px 60px rgba(31, 38, 135, 0.18);
    overflow: hidden;
}

.subscription-shell::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
        radial-gradient(circle at 85% 70%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%);
    opacity: 0.7;
    pointer-events: none;
}

.subscription-hero{
    text-align: center;
    margin: 6px 0 18px;
    position: relative;
    z-index: 1;
}

.subscription-hero h2{
    font-weight: 800;
    font-size: 2.55rem;
    color: #1e293b;
    margin-bottom: 6px;
    letter-spacing: -0.6px;
}

.subscription-hero p{
    color: #475569;
    font-size: 1.05rem;
    margin: 0;
}

.subscription-grid{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin: 0;
    padding: 6px 0 0;
}

/* Cards dos planos (mais “clean” e idêntico ao print) */
.plan-card{
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(31, 38, 135, 0.14);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.plan-card::before{ display: none; }

.plan-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 55px rgba(31, 38, 135, 0.18);
}

.plan-card.is-current{
    transform: translateY(-10px);
    box-shadow: 0 22px 70px rgba(31, 38, 135, 0.22);
}

.plan-card.is-current:hover{
    transform: translateY(-12px);
}

.plan-card__top{
    padding: 42px 20px 18px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Remove shimmer antigo */
.plan-card__top::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 70%);
    opacity: 1;
    pointer-events: none;
    animation: none;
}

.plan-card__top::after{
    content: "";
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -34px;
    height: 70px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.plan-card__top .plan-icon{
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 44px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    z-index: 2;
}

.plan-card__top .plan-icon i{
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
}

.plan-card--essential .plan-icon i,
.plan-card--basic .plan-icon i{ color: #2563eb; }
.plan-card--pro .plan-icon i{ color: #7c3aed; }
.plan-card--premium .plan-icon i,
.plan-card--vip .plan-icon i{ color: #b45309; }

.plan-title{
    font-size: 1.55rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.4px;
    position: relative;
    z-index: 1;
    margin: 0;
}

.plan-status{
    position: absolute;
    right: 16px;
    top: 16px;
    background: rgba(124, 58, 237, 0.90);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    z-index: 3;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.25);
}

.plan-card__body{
    padding: 18px 24px 10px;
    flex: 1;
}

.plan-price{
    text-align: center;
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin: 0;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.30);
}

.plan-price span{
    font-size: 1.02rem;
    color: #64748b;
    font-weight: 600;
}

.plan-features{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-features li{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-size: 1.02rem;
    font-weight: 500;
}

.plan-features i{
    color: #22c55e;
    font-size: 1.10rem;
    flex-shrink: 0;
}

.plan-features li.disabled{
    opacity: 0.55;
}

.plan-features li.disabled i{
    color: #94a3b8;
}

.plan-card__footer{
    padding: 0 24px 22px;
}

.plan-btn{
    width: 100%;
    border: none;
    padding: 12px 16px;
    font-weight: 800;
    font-size: 1.05rem;
    border-radius: 12px;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
}

.plan-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.18);
}

.plan-card .btn-outline-secondary{
    width: 100%;
    background: rgba(226, 232, 240, 0.55);
    color: #334155;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 800;
    box-shadow: none;
}

/* Cores específicas para cada plano (igual ao print) */
.plan-card--essential .plan-card__top,
.plan-card--basic .plan-card__top{
    background: linear-gradient(135deg, #7dd3fc 0%, #3b82f6 100%);
}
.plan-card--essential .plan-btn,
.plan-card--basic .plan-btn{
    background: linear-gradient(135deg, #7dd3fc 0%, #3b82f6 100%);
}

.plan-card--pro .plan-card__top{
    background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
}
.plan-card--pro .plan-btn{
    background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
}

.plan-card--premium .plan-card__top,
.plan-card--vip .plan-card__top{
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
}
.plan-card--premium .plan-btn,
.plan-card--vip .plan-btn{
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
}

/* Ajuda (pílula) */
.subscription-help{
    position: relative;
    z-index: 1;
    padding: 14px 18px;
    background: rgba(241, 245, 249, 0.65);
    border: 1px solid rgba(226, 232, 240, 0.90);
    border-radius: 999px;
    box-shadow: 0 14px 45px rgba(31, 38, 135, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    max-width: 820px;
    margin: 18px auto 0;
}

.subscription-help__text{
    color: #334155;
    font-weight: 600;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.subscription-help__text i{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(226, 232, 240, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.05rem;
}

.subscription-help__btn{
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: #fff;
    padding: 10px 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.98rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.25);
}

.subscription-help__btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 35px rgba(16, 185, 129, 0.30);
    color: #fff;
    text-decoration: none;
}

/* Responsivo */
@media (max-width: 1100px){
    .subscription-shell{ padding: 22px 18px 18px; }
    .subscription-grid{ gap: 18px; }
}

@media (max-width: 992px){
    .subscription-grid{
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .subscription-hero h2{ font-size: 2.15rem; }
}

@media (max-width: 768px){
    .subscription-page{ padding: 18px 12px; }
    .subscription-shell{ border-radius: 22px; }
    .subscription-grid{ grid-template-columns: 1fr; }
    .plan-card.is-current{ transform: none; }
    .subscription-help{ border-radius: 18px; }
}


/* ============================================================
   Ajuste fino: deslocar links Dashboard e Sair (sidebar)
============================================================ */
.sidebar-menu .nav{
    padding-top: 20px !important;
}
.sidebar-bottom .nav{
    padding-top: 12px !important;
}
.sidebar-bottom .menu-item:last-child{
    margin-top: 6px;
}