/* ==========================================================
   BASE
   ========================================================== */
   
/* Importa a fonte (exemplo: Poppins) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* Define como padrão para todo o site */
body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* ==========================================================
   LINK DO CARRINHO
   ========================================================== */

/* Badge personalizada do carrinho */
.cart-badge {
    position: absolute;
    top: 0;       /* encosta ao topo do ícone */
    right: 0;     /* encosta à direita */
    transform: translate(80%, -80%); /* empurra para fora no canto */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background-color: #edb402;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #212529;
    pointer-events: none;
}

/* se em mobile parecer demasiado afastado, podes ajustar o translate */
@media (max-width: 767px) {
    .cart-badge {
        transform: translate(90%, -90%);
    }
}

/* ==========================================================
   REMOVER DO CARRINHO
   ========================================================== */

/* Badge personalizada do remover */
.cart-remove-btn {
    background-color: #ffc203;   /* mesma cor do badge */
    border: none;
    color: #fff;
    width: 28px;                /* círculo mais proporcional */
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

.cart-remove-btn:hover {
    background-color: #b8942d;  /* tom mais escuro no hover */
}

.cart-remove-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(207, 164, 52, 0.4);
}

/* ==========================================================
   TEMA LARANJA
   ========================================================== */

/* Cor tema laranja*/
.theme-orange {
    color: #edb402 !important;
}

.btn-orange {
    background-color: #edb402;
    border: none;
    color: #fff;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-orange:hover {
    background-color: #b8942d; /* tom mais escuro no hover */
    color: #fff;
}

/*Botão laranja sem preenchimento*/
.btn-outline-orange {
    color: #edb402; /* cor do texto e borda */
    border: 2px solid #edb402;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus {
    color: #fff;           /* texto branco ao hover */
    background-color: #edb402; /* fundo laranja ao hover */
    border-color: #edb402; /* mantém a borda */
}

.btn-outline-orange:active {
    background-color: #b8942d; /* laranja mais escuro ao clicar */
    border-color: #b8942d;
}

/* ==============================
   Navbar links
   ============================== */
.navbar-nav .nav-link {
    font-size: 0.95rem;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.navbar-brand img {
    max-height: 45px;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #f0c040;
}

/* ==============================
   Dropdowns
   ============================== */

/* Garante que cada dropdown seja posicionado relativamente ao seu <li> (e não ao container) */
.navbar .nav-item.dropdown {
    position: relative;
}

/* Forçar o guestMenu a alinhar a sua margem direita com o toggle
   (ou seja, o menu "abre para a esquerda" para ficar dentro do site) */
@media (min-width: 992px) {
    #guestMenu + .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        transform: translateY(0) !important; /* evita deslocamentos indesejados */
        transform-origin: top right; /* animação/origem coerente */
    }
}

/* Hover desktop */
@media (min-width: 992px) {
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
    .dropdown-menu {
        margin-top: 0;
    }
}

/* Mobile: abrir submenu ao toque */
@media (max-width: 991px) {
    .dropdown-menu {
        display: none;
        position: static;
        float: none;
        min-width: 100%;
        margin: 0;
        padding-left: 0;
        border: none;
        box-shadow: none;
        background-color: #343a40;
    }

    .dropdown-menu.show {
        display: block !important;
    }

    .dropdown-menu li a {
        padding-left: 1.5rem;
        color: #fff;
    }

    .dropdown-menu li a:hover {
        background-color: #495057;
    }
}

/* ==============================
   Barra de pesquisa e sugestões
   ============================== */
.search-wrapper {
    position: relative;
    display: inline-block;
    width: 250px;
}

.search-bar-fix {
    margin-top: 5px;
    position: relative;
    z-index: 1000;
}

.search-bar-fix input {
    width: 100%;
}

#searchSuggestions {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1140px;
    background-color: #212529;
    color: #fff;
    border: 1px solid #6c757d;
    border-radius: 0.25rem;
    z-index: 2000;
    display: none;
    max-height: 400px;
    overflow-y: auto;
}

#searchSuggestions .suggestion-item {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
}

#searchSuggestions .suggestion-item img {
    flex-shrink: 0;
}

#searchSuggestions .suggestion-item span {
    flex-grow: 1;
}

#searchSuggestions .suggestion-item:hover {
    background-color: #0d6efd;
    color: white;
}

#searchInput::placeholder {
    color: #888;
    font-style: italic;
    font-size: 0.95rem;
}

/* ==============================
   Responsividade
   ============================== */
@media (max-width: 767px) {
    .search-wrapper { max-width: 100%; }
    #searchSuggestions { max-width: 100%; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .search-wrapper { max-width: 250px; }
}

/* ==============================
   Estilos do Painel de Administração
   ============================== */

/* Cabeçalho do dashboard */
.admin-header {
    background: none; /* Remove o fundo azul */
    color: #212529;   /* Cor da letra preta */
    padding: 1.5rem 0; /* Apenas espaçamento */
    border-radius: 0;  /* Sem borda arredondada */
    margin-bottom: 2rem;
    box-shadow: none;  /* Remove sombra */
}

.admin-header h2 {
    font-weight: 700;
    margin: 0;
}

/* Cartões principais */
.card {
    border: none !important;
  border-radius: 12px;
  overflow: visible; /* permite sombras e badges fora do cartão */
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

/* Estatísticas rápidas */
.stat-card {
    border-radius: 0.75rem;
    background: white;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
}

.stat-card h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #fff !important; /* Número em branco */
}

/* Mantemos o texto descritivo normal */
.stat-card p {
    color: #fff; /* Texto em branco */
    margin: 0;
    font-size: 0.9rem;
}

/* Badges personalizadas */
.card .badge {
    padding: 0.6em 1em;
    border-radius: 30px;
    font-size: 0.85rem;
}

/* Ícones dentro dos cards */
.card-title i {
    font-size: 1.3rem;
    margin-right: 0.5rem;
}

/* ==============================
   Dashboard Admin - Melhoria Visual
   ============================== */

/* Faz com que todos os cartões tenham altura completa na coluna */
.card.h-100 {
    display: flex;
    flex-direction: column;
}

/* Faz o botão ficar sempre no fundo do cartão */
.card-body.d-flex.flex-column .mt-auto {
    margin-top: auto;
}

/* Gradientes para estatísticas rápidas */
.stat-card.text-warning {
    background: linear-gradient(135deg, #ffe066, #ffc107);
    color: #212529;
}

.stat-card.text-danger {
    background: linear-gradient(135deg, #ff6b6b, #dc3545);
    color: #fff;
}

.stat-card.text-secondary {
    background: linear-gradient(135deg, #adb5bd, #6c757d);
    color: #fff;
}

/* Sombra diferenciada e hover mais elegante nos cartões */
.card.shadow-sm {
    transition: all 0.3s ease;
}

.card.shadow-sm:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.18);
}

/* Botões nos cartões */
.card .btn {
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.card .btn:hover {
    transform: translateY(-2px);
}

/* Ícones dos cartões maior e alinhado */
.card-title i {
    font-size: 1.4rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Garante que o texto do cartão não aumente a altura desnecessariamente */
.card-text.flex-grow-1 {
    flex-grow: 1;
}

/* ==============================
   Ajustes do Footer em Mobile
   ============================== */
@media (max-width: 767px) {
    footer .d-flex {
        gap: 1.5rem !important; /* mais espaço entre blocos */
    }

    footer .d-flex > div {
        width: 100%; /* cada bloco ocupa 100% no mobile */
    }

    footer .d-flex span {
        display: block; /* email e telefone em linhas separadas */
        margin-bottom: 0.5rem;
    }

    footer a i {
        font-size: 2rem; /* ícones maiores e tap-friendly */
        margin-right: 1rem;
    }

    footer .text-center.small {
        font-size: 0.8rem; /* texto legal mais compacto */
        line-height: 1.4;
    }
}

/* ============================
   Banner de Cookies
   ============================ */
.cookie-banner {
    z-index: 9999;
}

.cookie-banner.slide-up {
    animation: slideUp 0.5s forwards;
}

.cookie-banner.slide-down {
    animation: slideDown 0.5s forwards;
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}

/* ==============================
   Tabela de encomendas responsiva
============================== */
@media (max-width: 767px) {
    .orders-table thead {
        display: none; /* esconde o cabeçalho */
    }

    .orders-table, 
    .orders-table tbody, 
    .orders-table tr, 
    .orders-table td {
        display: block;
        width: 100%;
    }

    .orders-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .orders-table td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .orders-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    .orders-table td[data-label=""]::before {
        content: ""; /* não mostra nada na coluna das ações */
    }

    .orders-table td a.btn {
        width: 100%; /* botão ocupar a largura no mobile */
        text-align: center;
    }
}

/* ==============================
   Tabela de detalhes da encomenda responsiva
============================== */
@media (max-width: 767px) {
    .order-details-table thead {
        display: none;
    }

    .order-details-table,
    .order-details-table tbody,
    .order-details-table tr,
    .order-details-table td {
        display: block;
        width: 100%;
    }

    .order-details-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .order-details-table td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .order-details-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    .order-details-table td[data-label="Produto"]::before {
        content: none; /* remove a label só nesta coluna */
    }
}

/* ==============================
   Tabela de produtos devolvidos responsiva
============================== */
@media (max-width: 767px) {
    .order-returns-table thead {
        display: none;
    }

    .order-returns-table,
    .order-returns-table tbody,
    .order-returns-table tr,
    .order-returns-table td {
        display: block;
        width: 100%;
    }

    .order-returns-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .order-returns-table td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .order-returns-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    /* Oculta a label "Produto" */
    .order-returns-table td[data-label="Produto"]::before {
        content: none;
    }
}

/* ==============================
   Carrinho - Estilo dos itens
============================== */

.cart-quantity {
    display: flex;
    gap: 0.5rem;
}

.cart-qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    padding: 0;
    font-size: 1rem;
}

.cart-qty-value {
    min-width: 24px;
    text-align: center;
    display: inline-block;
}

.cart-remove-btn {
    width: 28px;
    height: 28px;
    font-size: 1rem;
}

/* Totais */
.card p.mb-1, .card p.mb-0 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Cupão */
.card form {
    justify-content: flex-start;
}

/* Responsividade: estilo tipo cartão para mobile */
@media (max-width: 767px) {
    .cart-items thead {
        display: none;
    }

    .cart-items, 
    .cart-items tbody, 
    .cart-items tr, 
    .cart-items td {
        display: block;
        width: 100%;
    }

    .cart-items tr {
        margin-bottom: 1rem;
        border-radius: 8px;
        padding: 0.75rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        background: #fff;
    }

    .cart-items td { 
		text-align: right;
		padding: 0.5rem 0;
		position: relative;
	}

    .cart-items td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    .cart-items td[data-label="Produto"]::before {
        content: "";
    }
	
	.cart-items td[data-label="Remover"]::before {
        content: "";
    }
	
	/* O tr vira "cartão", então precisa ser relativo */
    .cart-items tr {
        position: relative;
    }

    /* Botão de remover no canto superior direito */
    .cart-items td[data-label="Remover"] {
        position: absolute;
        top: 0.5rem;   /* distância do topo */
        right: 0.5rem; /* distância da direita */
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;   /* evita ocupar a linha toda */
        padding: 0;    /* remove padding extra */
    }
	
	.cart-quantity {
		justify-content: flex-end; /* Alinha à direita no celular */
		width: 100%; /* Garantir que ocupe toda a largura disponível */
	}
	
	/*Remover bora indeferior de remover*/
	.cart-items td[data-label="Remover"] {
        border: none !important;   /* remove qualquer linha */
        box-shadow: none !important; /* remove sombras herdadas */
        padding: 0;                /* tira espaço extra */
    }
}

/* ==============================
   Tabela de revisão da encomenda responsiva
============================== */
@media (max-width: 767px) {
    .review-items thead {
        display: none;
    }

    .review-items,
    .review-items tbody,
    .review-items tr,
    .review-items td {
        display: block;
        width: 100%;
    }

    .review-items tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .review-items td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .review-items td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    /* Não mostra a label no Produto */
    .review-items td[data-label="Produto"]::before {
        content: "";
    }
}

/* ==============================
   Tabela de gestão produtos responsiva
============================== */
@media (max-width: 767px) {
    .products-table thead {
        display: none;
    }

    .products-table,
    .products-table tbody,
    .products-table tr,
    .products-table td {
        display: block;
        width: 100%;
    }

    .products-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .products-table td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .products-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    /* Colunas sem label e centradas */
    .products-table td[data-label="Imagem"]::before,
    .products-table td[data-label="Produto"]::before,
    .products-table td[data-label="Ações"]::before {
        content: "";
    }
    .products-table td[data-label="Imagem"],
    .products-table td[data-label="Produto"] {
        text-align: center;
    }

    /* Botões ocupam largura inteira no mobile */
    .products-table td a.btn {
        width: 100%;
        margin-bottom: 0.3rem;
    }
}

/* ==============================
   Tabela de gestão stock responsiva
============================== */
@media (max-width: 767px) {
    .stock-table thead {
        display: none;
    }

    .stock-table,
    .stock-table tbody,
    .stock-table tr,
    .stock-table td {
        display: block;
        width: 100%;
    }

    .stock-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .stock-table td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .stock-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    /* Produto sem label e centralizado */
    .stock-table td[data-label="Produto"]::before,
	.stock-table td[data-label="Ações"]::before	{
		
        content: "";
    }
    .stock-table td[data-label="Produto"] {
        text-align: center;
    }

    /* Botão ocupa largura inteira */
    .stock-table td a.btn {
        width: 100%;
        margin-top: 0.3rem;
    }
}

/* ==============================
   Tabela de gestão famílias responsiva
============================== */
@media (max-width: 767px) {
    .families-table thead {
        display: none;
    }

    .families-table,
    .families-table tbody,
    .families-table tr,
    .families-table td {
        display: block;
        width: 100%;
    }

    .families-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .families-table td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .families-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    /* Família sem label e centrada */
    .families-table td[data-label="Família"]::before,
	.families-table td[data-label="Subfamílias"]::before,
	.families-table td[data-label="Ações"]::before	{
        content: "";
    }
    .families-table td[data-label="Família"] {
        text-align: center;
        font-weight: 600;
        font-size: 1.1rem;
    }

    /* Botões ocupam largura inteira no mobile */
    .families-table td a.btn {
        width: 100%;
        margin-bottom: 0.3rem;
    }

    /* Subfamílias listadas em coluna */
    .families-table td[data-label="Subfamílias"] > div {
        flex-direction: column;
        align-items: stretch !important;
    }

    .families-table td[data-label="Subfamílias"] span {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.3rem;
    }
}

/* Tabela de gestão marcas responsiva */
@media (max-width: 767px) {
    .brands-table thead {
        display: none;
    }

    .brands-table,
    .brands-table tbody,
    .brands-table tr,
    .brands-table td {
        display: block;
        width: 100%;
    }

    .brands-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .brands-table td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .brands-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    /* Oculta labels para colunas Ações e Imagem */
    .brands-table td[data-label="Ações"]::before,
	.brands-table td[data-label="Website"]::before,
    .brands-table td[data-label="Imagem"]::before {
        content: "";
    }
	
	.brands-table td[data-label="Website"] {
        text-align: center;
    }

    .brands-table td a.btn {
        width: 100%;
        text-align: center;
        margin-bottom: 0.25rem;
    }
}

/* ==============================
   Tabela de coupons responsiva
============================== */
@media (max-width: 767px) {
    .coupons-table thead {
        display: none;
    }

    .coupons-table,
    .coupons-table tbody,
    .coupons-table tr,
    .coupons-table td {
        display: block;
        width: 100%;
    }

    .coupons-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .coupons-table td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .coupons-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    /* Ocultar label Ações */
    .coupons-table td[data-label="Ações"]::before {
        content: "";
    }

    /* Botões em largura total */
    .coupons-table td a.btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

/* ==============================
   Tabela de gestão encomendas (Admin) responsiva
============================== */
@media (max-width: 767px) {
    .orders-table-admin thead {
        display: none;
    }

    .orders-table-admin,
    .orders-table-admin tbody,
    .orders-table-admin tr,
    .orders-table-admin td {
        display: block;
        width: 100%;
    }

    .orders-table-admin tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .orders-table-admin td {
        padding: 0.5rem 0;
        text-align: right;   /* valores à direita */
        border: none;
        position: relative;
    }

    .orders-table-admin td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;   /* labels à esquerda */
    }

    /* Ações sem label e botões em largura total */
    .orders-table-admin td[data-label="Ações"]::before {
        content: "";
    }
    .orders-table-admin td[data-label="Ações"] {
        text-align: center;
    }
    .orders-table-admin td a.btn {
        width: 100%;
        margin-bottom: 0.3rem;
    }
}

/* ==============================
   Tabela detalhes da encomenda (Admin) responsiva
============================== */
@media (max-width: 767px) {
    .orders-table-admin-details thead {
        display: none;
    }

    .orders-table-admin-details,
    .orders-table-admin-details tbody,
    .orders-table-admin-details tr,
    .orders-table-admin-details td {
        display: block;
        width: 100%;
    }

    .orders-table-admin-details tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .orders-table-admin-details td {
        padding: 0.5rem 0;
        text-align: right;   /* valores à direita */
        border: none;
        position: relative;
    }

    .orders-table-admin-details td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;   /* labels à esquerda */
    }
	
	/* Ocultar label "Produto" */
    .orders-table-admin-details td[data-label="Produto"]::before {
        content: "";
    }

    /* Centrar o conteúdo da célula Produto */
    .orders-table-admin-details td[data-label="Produto"] {
        text-align: center;
    }
}

/* ==============================
   Tabela de gestão de utilizadores responsiva
============================== */
@media (max-width: 767px) {

    .users-table-admin thead {
        display: none;
    }

    .users-table-admin,
    .users-table-admin tbody,
    .users-table-admin tr,
    .users-table-admin td {
        display: block;
        width: 100%;
    }

    .users-table-admin tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .users-table-admin td {
        padding: 0.5rem 0;
        text-align: right;
        border: none;
        position: relative;
    }

    .users-table-admin td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #555;
        text-align: left;
    }

    /* Não mostrar label nas ações */
    .users-table-admin td[data-label="Ações"]::before {
        content: none;
    }

    /* Botões ocupam a largura inteira no mobile */
    .users-table-admin td a.btn,
    .users-table-admin td button.btn {
        width: 100%;
        text-align: center;
        margin-bottom: 0.3rem;
    }
}


/* ==============================
   Tabela de devoluções responsiva
============================== */
@media (max-width: 767px) {
    .returns-table thead {
        display: none;
    }

    .returns-table,
    .returns-table tbody,
    .returns-table tr,
    .returns-table td {
        display: block;
        width: 100%;
    }

    .returns-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .returns-table td {
        padding: 0.75rem 0;
        border: none;
        position: relative;
        text-align: left; /* default à esquerda */
    }

    .returns-table td::before {
        content: attr(data-label);
        display: block; /* força quebra de linha acima do conteúdo */
        font-weight: 600;
        margin-bottom: 0.35rem;
        color: #555;
    }

    /* Produto: sem label, apenas nome centrado */
    .returns-table td[data-label="Produto"]::before {
        content: "";
        display: none;
    }
    .returns-table td[data-label="Produto"] {
        text-align: center;
        font-weight: 600;
        font-size: 1.1rem;
        white-space: nowrap; /* mantém nome + unidade na mesma linha */
    }
    .returns-table td[data-label="Produto"] span {
        display: inline;        /* fica ao lado do nome */
        margin-left: 0.35rem;   /* pequeno espaço */
        font-weight: normal;
        font-size: 0.9rem;
        color: #6c757d;         /* cinza bootstrap */
    }

    /* Inputs e small ocupam largura total */
    .returns-table input.form-control {
        width: 100%;
    }
    .returns-table small {
        display: block;
        margin-top: 0.35rem;
    }
}