/* Não mobile */
@media (min-width: 721px) {
    .bd-mobile-list {
        display: none !important;
    }
}
:root{
    --bg: #ffffff;
    --panel: #f7f8fa;
    --muted: #6b7280;
    --accent: #0b74de;
    --accent-600: #0466c8;
    --border: #e6e9ee;
    --success: #059669;
    --radius: 8px;
    --gap: 12px;
    --shadow-sm: 0 6px 18px rgba(13, 38, 59, 0.06);
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Scoped container */
.bidelait-lista-escolar { font-family: var(--font-sans); color: #0f172a; background: transparent; }

.carregando {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    background: rgba(2,6,23,0.85);
    color: #fff;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 15px;
    z-index: 9999;
}

.bd_radios.similar.mobile, th.bd_radios.selecao {
    display: none;
}

#lista-escolar { margin-top: 10px; }

.main-container .bd_selecao label {
    display: flex;
}

/* Filters */
.bd-filtros { display:flex; gap:var(--gap); align-items:center; flex-wrap:wrap; margin-bottom:18px; padding-bottom: 14px;}
.bd-filtros label { color:var(--muted); font-size:13px; }
.bd-filtros select { padding:8px 10px; border:1px solid var(--border); border-radius:6px; background:var(--bg); min-width:160px; max-width:100%; box-sizing:border-box; color:inherit; }


/* Escola info + map */
.bd_tabela-escola { display:flex; gap:18px; align-items:flex-start; }
.bd_tabela-escola table { border-collapse:collapse; background:var(--bg); border-radius:6px; overflow:hidden; border:1px solid var(--border); }
.bd_tabela-escola th, .bd_tabela-escola td { padding:10px 12px; font-size:14px; color:var(--muted); }
.bd_maps_osm { min-height:260px; height:260px; border-radius:6px; border:1px solid var(--border); width:360px; }
.main-container .bd_selecao label {
    display: flex;
}

/* Table scroll wrapper */
.bd-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:72px; }
.bd-table-scroll table { width:100%; min-width:720px; border-collapse:separate; border-spacing:0; }
table thead th { text-align:left; font-weight:600; font-size:13px; padding:12px 14px; color:var(--muted); background:var(--panel); border-bottom:1px solid var(--border); }
table tbody td { padding:12px 14px; vertical-align:middle; border-bottom:1px solid #f3f4f6; }

/* Products */
.produto-principal { background: #fff; }
.produto-similar { background: #fbfdff; color: var(--muted); }
.excluir-x {
    position: relative;
    left: 5px;
    top: -60px;
}
.produto-similar td { padding-left: 24px; }

.produto-imagem img { width:54px; height:54px; object-fit:cover; border-radius:6px; font-size: 8px;}
.excluir-x { background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:4px; }
.excluir-x {
    position: relative;
    left: 5px;
    top: -60px;
}

/* Garantir que itens similares (filhos) não exibam botão de excluir */
.produto-similar .excluir-x,
.produto-similar .excluir-item {
    display: none !important;
}

/* Variações (frontend) */
.produto-variacoes {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
}
.produto-variacoes .variacao-botao {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #111827;
    cursor: pointer;
    border: 1px solid var(--border);
    font-size: 13px;
}
.produto-variacoes .variacao-botao:hover { background: #eef2ff; }
.produto-variacoes .variacao-select { display: none; margin-top:6px; }
.produto-variacoes.expanded .variacao-select { display: block; }

/* Quantity input */
input.quantidade-produto, input.quantidade-similar { width:64px; padding:6px 8px; border:1px solid var(--border); border-radius:6px; }

/* Quantity external buttons (default) */
.bidelait-qty-control { display:inline-flex; align-items:center; gap:6px; }
.bidelait-qty-control button.bidelait-qty-btn { width:32px; height:32px; border-radius:6px; border:1px solid var(--border); background:#fff; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.bidelait-qty-control button.bidelait-qty-btn:active { transform:translateY(1px); }
.bidelait-qty-control input.quantidade-produto { width:56px; padding:6px 8px; text-align:center; }

/* Inline arrows style (if chosen) - show spinner-like arrows inside input for browsers that support appearance:none */
.quantidade-inline { position:relative; }
.quantidade-inline input.quantidade-produto { padding-right:28px; }
.quantidade-inline .inline-arrows { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:2px; }
.quantidade-inline .inline-arrows button { width:18px; height:14px; padding:0; border-radius:3px; border:1px solid var(--border); background:#fff; color:var(--muted); cursor:pointer; }

/* Radio / selection */
.bd_radios input[type="radio"], .bd_radios input[type="checkbox"] { width:18px; height:18px; }

/* Sticky footer */
.bd-table-footer { position:sticky; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; background:linear-gradient(180deg,var(--bg),#fbfcfd); border-top:1px solid var(--border); box-shadow:var(--shadow-sm); z-index: 999; }
.bd-table-footer .total { font-weight:700; }
.bd-table-footer .actions button { background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; box-shadow:0 6px 12px rgba(11,116,222,0.12); }
.bd-table-footer .actions button:disabled { background:#d1d5db; cursor:not-allowed; }

/* Small utilities */
.bidelait-action-feedback { position:fixed; right:20px; bottom:22px; background:var(--success); color:#fff; padding:8px 12px; border-radius:8px; box-shadow:var(--shadow-sm); font-size:13px; z-index:99999; opacity:0; transform:translateY(8px); transition:all 200ms ease; }
.bidelait-action-feedback.show { opacity:1; transform:translateY(0); }

/* Dragging state */
.bd-table-scroll.dragging { cursor:grabbing; }
.bd-table-scroll::-webkit-scrollbar { height:8px; }
.bd-table-scroll::-webkit-scrollbar-thumb { background:rgba(15,23,42,0.08); border-radius:8px; }

/* Checkbox label simple and consistent across devices (visual parity with mobile) */
#ver-alternativas { display:inline-block; margin:0 6px 0 0; }
.ver-similar-label { cursor:pointer; color:var(--muted); font-size:13px; }
#ver-alternativas:checked + .ver-similar-label { color:var(--accent-600); font-weight:600; }

/* Accessibility helpers */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Tiny transitions */
table tbody tr { transition: background 180ms ease, transform 200ms ease, opacity 200ms ease; }
tr.removing { opacity:0; transform:translateY(-6px); }

/* Disabled button style for enviar carrinho */
#enviar-carrinho:disabled { background:#e5e7eb; color:#9ca3af; cursor:not-allowed; }

/* (custom qty controls removed as per user request) */
.carregando {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-size: 18px;
    z-index: 9999;
}

#enviar-carrinho:disabled {
    background-color: #ddd;
    color: #999;
    cursor: not-allowed;
}

.produto-similar {
    background-color: #f8f8f8; /* Cor diferente para indicar similaridade */
    padding-left: 20px; /*Adicionar recuo à esquerda */
    margin-left: 10px; /*Margem para indenação*/
}
.bd_radios.similar {
    border-left: 20px solid #fff; /*linha para indicar que é um item relacionado*/
    padding-left: 20px; /* Indenta para dar efeito de agrupamento */
}

#escola-info {
    display: flex;
    gap: 20px; /* Espaçamento entre as tabelas */
    align-items: flex-start; /* Alinhar pelo topo */
}

#escola-info table {
    border-collapse: collapse;
    width: auto; /* Ajusta à largura do conteúdo */
}
#escola-info {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px; /* Espaçamento entre as tabelas */
}

input.quantidade-produto, input.quantidade-similar {
    width: 3em;
}
tr.produto-similar {
    display: none;
}
.bd_tabela-escola {
    display: flex;
}
div#map {
    width: 40%;
    margin-bottom: 3%;
    margin-left: 7px;
}

/* Map container: padrão visível (sem toggle). Em mobile será reposicionado via media queries. */
.bd_maps_osm {
    width: 40%;
    margin-bottom: 3%;
    margin-left: 7px;
    /* altura mínima para o Leaflet inicializar corretamente */
    min-height: 300px;
    height: 300px;
}

/* Accessibility: visually hidden (screen-reader only) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Insert modal styles */
.bidelait-modal { position: fixed; inset: 0; display: none; z-index: 10000; }
.bidelait-modal.open { display: block; }
.bidelait-modal__backdrop { position:absolute; inset:0; background:rgba(2,6,23,0.45); }
.bidelait-modal__panel { position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--bg); width:88%; max-width:980px; border-radius:10px; box-shadow:0 20px 60px rgba(2,6,23,0.3); overflow:hidden; }
.bidelait-modal__header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border); }
.bidelait-modal__body { padding:14px 18px; max-height:60vh; overflow:auto; }
.bidelait-modal__footer { padding:12px 18px; border-top:1px solid var(--border); background:var(--panel); display:flex; justify-content:space-between; align-items:center; }
.bidelait-modal__close { background:transparent; border:none; font-size:20px; cursor:pointer; }

/* Simple modal inner used by JS helper */
.bidelait-modal-inner { position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--bg); width:90%; max-width:560px; border-radius:8px; padding:18px; box-shadow:0 20px 60px rgba(2,6,23,0.25); }
.bidelait-modal-inner h3 { margin:0 0 8px 0; }
.bidelait-modal-inner ul { margin:8px 0 12px 18px; }

/* Disabled class used instead of native disabled so we can still show modal on click */
.bidelait-disabled { opacity:0.6; cursor:not-allowed !important; }
.bd-table-footer .actions button.bidelait-disabled { background:#d1d5db; color:#9ca3af; }
.bidelait-sending { opacity:0.85; }

/* Highlight pulse for focused missing variation row */
.bidelait-highlight { animation: bidelait-pulse 2s ease-in-out; box-shadow: 0 6px 18px rgba(11,116,222,0.08); border-radius:6px; }
@keyframes bidelait-pulse {
    0% { background-color: rgba(11,116,222,0.06); }
    50% { background-color: rgba(11,116,222,0.12); }
    100% { background-color: transparent; }
}

.bidelait-insert-filters { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.bidelait-insert-filters select, .bidelait-insert-filters input { padding:8px 10px; border:1px solid var(--border); border-radius:6px; }
.bidelait-insert-results { min-height:200px; }
.bidelait-insert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.bidelait-insert-card { background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px; display:flex; align-items:center; gap:8px; }
.bidelait-insert-card__img img { width:64px; height:64px; object-fit:cover; border-radius:6px; }
.bidelait-insert-card__meta { flex:1; font-size:13px; }
.bidelait-insert-card__title { font-weight:600; margin-bottom:6px; }
.bidelait-insert-card__price { color:var(--muted); margin-bottom:6px; }
.bidelait-insert-card__qty input { width:60px; padding:6px; border-radius:6px; border:1px solid var(--border); }
.bidelait-insert-card__label { display:flex; gap:8px; align-items:center; }

.bidelait-loading, .bidelait-error, .bidelait-empty { padding:20px; text-align:center; color:var(--muted); }

/* Modal action buttons */
.bidelait-modelo-actions button {
    padding:8px 10px;
    border-radius:8px;
    border:1px solid var(--border);
    font-size:13px;
    cursor:pointer;
    background: #fff;
    color: #0f172a;
}
.bidelait-modelo-actions .btn-carregar-modelo {
    background: transparent;
    border-color: transparent;
    color: var(--accent-600);
    font-weight:600;
}
.bidelait-modelo-actions .btn-gerar-modelo {
    background:var(--accent);
    color:#fff;
    border:none;
    box-shadow:0 6px 12px rgba(11,116,222,0.12);
}
.bidelait-modelo-actions .btn-gerar-modelo.bidelait-disabled,
.bidelait-modelo-actions .btn-gerar-modelo[aria-disabled="true"] {
    background:var(--accent-600);
    opacity:0.6;
    cursor:not-allowed;
    box-shadow:none;
}

/* Toast / feedback for disabled actions */
.bidelait-toast {
    position:fixed;
    right:16px;
    bottom:20px;
    background:rgba(0,0,0,0.85);
    color:#fff;
    padding:10px 14px;
    border-radius:8px;
    box-shadow:var(--shadow-sm);
    z-index:11000;
    font-size:13px;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 180ms ease, transform 180ms ease;
}
.bidelait-toast.show { opacity:1; transform:translateY(0); }

/* Mobile-specific layout tweaks for lista escolar */
@media (max-width: 480px) {
    /* tornar a coluna de seleção (checkbox/radio) sticky */
    thead th.bd_selecao {
        position: sticky;
        top: 0; /* manter o header visível */
        left: 0;
        z-index: 14; /* acima do corpo */
        background: var(--bg);
        width: 56px;
        min-width: 56px;
    }
    tbody td.bd_radios {
        position: sticky;
        left: 0;
        z-index: 7;
        background: var(--bg);
        width: 56px;
        min-width: 56px;
    }

    /* tornar a coluna de foto fixa (segunda coluna) deslocada à direita da coluna de seleção */
    thead th:nth-child(2) {
        position: sticky;
        top: 0;
        left: 56px;
        z-index: 13; /* abaixo do primeiro header, acima do corpo */
        background: var(--bg);
        min-width: 64px;
    }
    tbody td:nth-child(2) {
        position: sticky;
        left: 56px;
        z-index: 6;
        background: var(--bg);
        min-width: 64px;
    }

    /* garantir que a imagem tenha espaço e fique acima das linhas quando sticky */
    .produto-imagem { z-index: 9; }

    /* estilo do container que receberá o checkbox próximo ao título (inserido via JS) */
    #lista-escolar .ver-similar-container {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 10px;
    }

    /* ajustar o título para comportar checkbox ao lado */
    #lista-escolar > h3 { display: inline-flex; align-items: center; gap: 10px; }
    /* Make the image cell a positioned container so the delete X can overlay */
    .produto-imagem {
        position: relative;
        width: 70px;
        padding: 12px 14px;
    }
    .produto-imagem img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        display: block;
    }
    /* Small circular X button inside image */
    .produto-imagem .excluir-x {
        position: absolute;
        top: 4px;
        left: 4px;
        background: rgba(0,0,0,0.6);
        color: #fff;
        border: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    /* Reduce padding and font size for better fit */

/* Mobile card list container (hidden by default on desktop) */
.bd-mobile-list { display: none; padding: 12px; }

@media (max-width: 720px) {
    /* hide wide table on small screens and show mobile cards */
    .bd-table-scroll { display: none !important; }
    .bd-mobile-list { display: block; }

    .bd-mobile-card {
        min-height: 315px;
    }

    button.excluir-item.excluir-x {
        left: 3px;
        top: -16px;
        position: absolute;
        font-weight: 600;
        font-size: 28px;
    }

    span.bd-closed {
    position: relative;
    left: 0px;
    top: 15px;
    border-radius: 50px;
    background-color: var(--muted);;
    width: 32px;
    height: 32px;
    z-index: 99;
}
    .excluir-x {
    color: #fff;
    }

    .card-image img {
        width: 100%;
        min-width: 250px;
        background-size: contain;
    }

    .bd-mobile-card {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 28px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-shadow: var(--shadow-sm);
    }

    .bd-mobile-card .card-header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
    }
    .bd-mobile-card .card-header .excluir-x {
        width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none;
        display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;
    }
    .bd-mobile-card .card-header .bd_selecao-produto { width: 20px; height: 20px; }
    .bd-mobile-card .card-header .card-title { flex: 1; }

    .bd-mobile-card .produto-variacoes { margin-top: 0; font-size: 13px; }
    .bd-mobile-card .card-body { display:flex; gap:10px; align-items:flex-start; }
    .bd-mobile-card .card-image { flex: 0 0 84px; }
    .bd-mobile-card .card-image img { object-fit:cover; border-radius:6px; display:block; }
    .bd-mobile-card .card-meta { flex:1; display:flex; flex-direction:column; gap:6px; }
    .bd-mobile-card .card-meta-row { display:flex; gap:8px; align-items:center; justify-content:space-between; }

    .bd-mobile-card .card-meta-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 6px; }
    .bd-mobile-card .card-quantity input { width: 100%; }
    .bd-mobile-card .card-price { font-weight: 700; color: var(--muted); }

    .bd-mobile-card .card-similar-field { margin-top: 8px; font-size: 13px; color: var(--muted); display: none;}
    .bd-mobile-card .bd-mobile-similar-list { margin-top: 8px; display: none; gap: 8px; flex-direction: column; }
    .bd-mobile-card .bd-mobile-similar-list.open { display: flex; }
    .bd-mobile-card .bd-mobile-similar-toggle { margin-right: 6px; }

    .produto-preco, .card-price{
        width: 40%;
    }
    .card-quantity {
        width: 60%;
    }

     /* sibling similar-list (when inserted after the card) should also be hidden by default
         and shown when opened via JS (class 'open') or when the previous card has 'show-similares' */
     .bd-mobile-similar-list { margin-top: 8px; display: none; gap: 8px; flex-direction: column; }
     .bd-mobile-similar-list.open { display: flex; margin-bottom: 28px;}
     .bd-mobile-card.show-similares + .bd-mobile-similar-list { display: flex; margin-bottom: 28px; }

    /* Indent and style similar items to be visually nested under parent */
    .bd-mobile-card .bd-mobile-similar-list {
        margin-left: 40px;
        padding-left: 12px;
        border-left: 2px solid var(--border);
        background: transparent;
    }
    .bd-mobile-card .bd-mobile-similar-item {
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 6px 0;
    }
    .bd-mobile-card .bd-mobile-similar-item .sim-thumb img { width:40px; height:40px; object-fit:cover; border-radius:6px; }
    .bd-mobile-card .bd-mobile-similar-item .sim-main { flex:1; }
    .bd-mobile-card .bd-mobile-similar-item .sim-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }

    /* Compact adjustments for very small screens */
    @media (max-width: 420px) {
        .bd-mobile-card { padding: 8px; gap: 8px; }
        .bd-mobile-card .card-media { width: 72px; flex: 0 0 72px; }
        .bd-mobile-card .card-media img { width: 60px; height: 60px; }
    }
}
    table, table td, table th {
        font-size: 13px;
    }
    /* Espaçamento inferior entre linhas para melhor legibilidade no mobile */
    #lista-escolar tbody tr td {
        padding-bottom: 10px;
    }
    #lista-escolar tbody tr {
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 8px; /* fallback visual */
    }

    /* Animação ao remover linha */
    #lista-escolar tbody tr.removing {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 280ms ease, transform 280ms ease;
    }

    /* Feedback breve de ação (toast) */
    .bidelait-action-feedback {
        position: fixed;
        right: 16px;
        bottom: 20px;
        background: rgba(0, 120, 0, 0.9);
        color: #fff;
        padding: 8px 12px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        font-size: 13px;
        z-index: 99999;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 220ms ease, transform 220ms ease;
    }
    .bidelait-action-feedback.show {
        opacity: 1;
        transform: translateY(0);
    }
    /* Scroll wrapper for wide tables */
    .bd-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .bd-table-scroll table {
        min-width: 800px; /* garante que tabelas maiores criem scroll */
        width: 100%;
        border-collapse: collapse;
    }
    /* nota: regras de sticky da primeira coluna já definidas acima */
    /* Indica arraste quando ativado */
    .bd-table-scroll.dragging {
        cursor: grabbing;
    }
    .bd-table-scroll::-webkit-scrollbar {
        height: 8px;
    }
    .bd-table-scroll::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 4px;
    }
    /* Mantém colunas de preço e compra visíveis no mobile (reexibir) */
    /* Aumenta campo de quantidade para facilitar alteração no mobile */
    .produto-quantidade .quantidade-produto {
        width: 4.2em;
        font-size: 14px;
    }
    th.bd_selecao {
        width: 12%;
    }
    .bidelait-insert-filters {
        display: grid;
    }
}
/* Mobile card list container - default hidden on desktop */
.bd-mobile-list { display: none; }

/* At small and tablet widths replace wide table with mobile card list */
@media (max-width: 720px) {
    .bd-table-scroll { display: none !important; }
    .bd-mobile-list { display: block; padding: 8px; display: grid; gap: 10px; }
    .bd-mobile-card { background: #fff; border:1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; grid-template-columns: 64px 1fr auto; gap:8px; align-items: center; }
    .bd-mobile-card .card-body { display:flex; flex-direction:column; gap:6px; }
    .bd-mobile-card .card-title { font-weight:600; font-size:14px; color: #0f172a; }
    .bd-mobile-card .card-meta { font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center; }
    .bd-mobile-card .card-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
    .bd-mobile-card .card-actions .quantidade-produto { width:56px; }
    .bd-mobile-card .card-actions .bd-selecao-radio { margin-bottom:6px; }
    .bd-mobile-similar-list { margin-top:8px; padding-left:8px; border-left:2px dashed var(--border); display:none; }
    .bd-mobile-card.show-similares .bd-mobile-similar-list { display:block; }
    .bd-mobile-similar-item { display:flex; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid #f3f4f6; }
}
/* Também aplicar foto sticky em tablets (<= 720px) */
@media (max-width: 720px) {

    .bd_tabela-escola { flex-direction:column; }
    .bd_maps_osm { width:100%; order:3; }
    /*.bd-table-scroll table { min-width:unset; }*/
    td.bd_radios.similar {
        background-color: #f8f8f8;
    }
    table thead th { position:sticky; top:0; z-index:3; }
    .produto-imagem img { width:48px; height:48px; }
    input.quantidade-produto { width:56px; }
    .bd_radios.similar.mobile, th.bd_radios.selecao { display: flex; }

    /* Mobile/tablet: empilha tabela e mapa (mapa abaixo da tabela) */
    .bd_tabela-escola {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    th.bd_radios.selecao {
        left: 0px;
        background-color: #f7f8fa;
    }

    .bd_tabela-escola table {
        width: 100%;
    }

    .card-title {
        display: flex;
        align-items: flex-start;
    }
    .card-title span {
        margin-top: 3px;
        margin-right: 7px;
    }

    /* controles do mapa devem ficar entre a tabela e o mapa */
    .bd_maps_osm__controls { order: 2; }
    .bd_maps_osm { order: 3; width: 100%; margin-left: 0; }

    /* override do antigo seletor que definia 40% */
    div#map { width: 100%; margin-left: 0; }

    /* tornar a coluna de seleção (primeira coluna) e a coluna de foto (segunda) sticky */
    th.bd_selecao, td.bd_radios {
        position: sticky;
        left: 0;
        z-index: 8;
        background: var(--bg);
        width: 56px;
        min-width: 56px;
    }

    .produto-imagem {
        z-index: 9;
        position: sticky;
        left: 54px;
    }
    .bd_radios .similar {
        z-index: 9;
        position: sticky;
        left: 0px;
    }
        .bd_radios.similar.mobile {
        display: flex;
    }
    label.bd-ver-alternativa {
        display: none !important;
    }

    table thead th:nth-child(2), table tbody td:nth-child(2) {
        position: sticky;
        left: 56px; /* desloca para a direita da coluna de seleção */
        z-index: 7;
        background: var(--bg);
        min-width: 64px;
    }

    /* garantir que a imagem tenha espaço e fique acima das linhas quando sticky */
    .produto-imagem { z-index: 9; }

    /* garantir comportamento do container do checkbox próximo ao título em tablets */
    #lista-escolar .ver-similar-container {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 10px;
    }

    #lista-escolar > h3 { display: inline-flex; align-items: center; gap: 10px; }
    .bidelait-no-list {
        display: grid;
        width: 45%;
    }
    /*removendo textos dos botões*/
    button#enviar-carrinho, button#inserir-itens, button#bidelait-insert-confirm {
        font-size: 0;
    }
    button#enviar-carrinho:before, button#enviar-carrinho:after, button#inserir-itens:before, button#bidelait-insert-confirm:before {
        font-family: 'dashicons';
        font-size: 16px;
    }

    button#inserir-itens:before {
        content: "\f502";
    }
    button#enviar-carrinho:before {
        content: "\f344";
    }
    button#enviar-carrinho:after {
        content: "\f174";
    }
    button#bidelait-insert-confirm:before {
        content: "\f316";
    }
    .bidelait-modal__btn-cancel {
        font-size: 16px;
    }
}

/* Footer sticky dentro do wrapper rolável */
/*.bd-table-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #eaeaea;
    z-index: 6;
    box-shadow: 0 -6px 12px rgba(0,0,0,0.04);
}*/
.bd-table-footer .total {
    font-size: 15px;
    font-weight: 600;
}
.bd-table-footer .actions button, .bidelait-insert-confirm, #bidelait-insert-confirm, #bidelait-insert-buscar {
    background: #007cba;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.bidelait-modal__btn-cancel {
    background: #ee6f08;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.bd-table-footer .actions button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Preload overlay quando adicionando ao carrinho */
.bidelait-preload {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    z-index: 100000; /* acima de tudo */
}
.bidelait-preload .box {
    background: #fff;
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    box-shadow: 0 8px 30px rgba(2,6,23,0.18);
    max-width: 90%;
}
.bidelait-preload .spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid #eef2ff;
    border-top-color: var(--accent);
    animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bidelait-preload .text { font-size: 15px; color: #0f172a; }

/* Mobile: texto menor e caixa mais compacta */
@media (max-width: 480px) {
    .bidelait-preload .box { padding: 10px 12px; gap: 8px; }
    .bidelait-preload .text { font-size: 13px; }
}

/* Espaço extra dentro do wrapper para não ficar escondido pelo footer */
.bd-table-scroll {
    padding-bottom: 21px; /* deve ser >= altura do footer */
}

/* Estado quando não há lista: mensagem + CTA */
.bidelait-no-list { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:18px; background:#fff7f0; border:1px dashed var(--border); border-radius:8px; }
.bidelait-no-list__text { margin:0; color:#92400e; font-weight:600; }
.btn-gerar-lista { background:var(--accent); color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; }

/* Modal básico de modelos (stub) */
.bidelait-modal { display:none; }
.bidelait-modal.open { display:block; }
.bidelait-modal__backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:99998; }
.bidelait-modal__panel { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; border-radius:10px; width:90%; max-width:820px; z-index:99999; box-shadow:0 12px 40px rgba(2,6,23,0.2); }
.bidelait-modal__header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); background-color: #f7f8fa; }
.bidelait-modal__body { padding:16px; max-height:60vh; overflow:auto; }
.bidelait-modal__footer { padding:12px 16px; border-top:1px solid var(--border); text-align:right; }
.bidelait-modal__close { background:transparent; border:none; font-size:20px; cursor:pointer; }
.bidelait-modelo-item {
    border: 1px solid var(--border);
    padding: 17px;
    border-radius: 5px;
    margin-bottom: 14px;
}

.bd-filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

/* Torna os selects do filtro responsivos e evita que nomes longos quebrem o layout */
.bidelait-lista-escolar .bd-filtros label {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: 4px;
}
.bidelait-lista-escolar .bd-filtros select {
    flex: 0 1 320px; /* cresce até 320px, encolhe quando necessário */
    min-width: 140px;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* mostra '...' quando texto selecionado for muito longo */
}
/* Permite que opções no dropdown possam quebrar linha em navegadores que suportam */
.bidelait-lista-escolar .bd-filtros select option {
    white-space: normal;
}

/* Fornece uma dica (tooltip) automática com o texto completo quando o valor está truncado. */
.bidelait-lista-escolar .bd-filtros select[title] { cursor: help; }

/* Ensure checkbox is visible on desktop */
@media (min-width: 721px) {
    /* Mostrar o checkbox visível no desktop com estilo simples (igual ao mobile) */
    #ver-alternativas { display: inline-block; position: static; left: auto; }
    .ver-similar-label { margin-left: 6px; display: inline-block; cursor: pointer; padding: 0; border: none; background: transparent; color: inherit; }
    /* Quando marcado, mantenha apenas um leve destaque (preserve visual consistency) */
    #ver-alternativas:checked + .ver-similar-label { font-weight: 600; }
    td.produto-preco-unitario {
        width: 12%;
    }
}

/* Desktop: garantir posicionamento consistente do botão de excluir dentro da célula de imagem
   Tornar o botão circular e posicionado no canto superior-esquerdo apenas em telas maiores (desktop). */
@media (min-width: 721px) {
    .produto-imagem {
        position: relative; /* container posicionado para que o botão absoluto seja relativo a ele */
    }

    .produto-imagem .excluir-x {
        position: absolute !important;
        top: 6px;
        left: 6px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(0,0,0,0.6);
        color: #fff;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1;
        padding: 0;
        cursor: pointer;
        z-index: 20; /* acima da imagem */
    }

    /* garantir que a imagem permaneça no fluxo e que o botão não altere o layout */
    .produto-imagem img { display: block; }
}

/* Mobile card list container - hidden by default (desktop) */
.bd-mobile-list { display: none; }

/* At small and tablet widths replace wide table with mobile card list */
@media (max-width: 720px) {
    /* hide wide horizontal table and show mobile list */
    .bd-table-scroll { display: none; }
    .bd-mobile-list { display: block; }

    .card-title {
        display: flex;
        align-items: center;
    }

    /* mobile card styles */
    .bd-mobile-list { padding: 8px; display: grid; gap: 10px; }
    .bd-mobile-card { background: #fff; border:1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; grid-template-columns: 64px 1fr auto; gap:8px; align-items: center; width: 100%; min-height: 420px; justify-content: space-between;}
    .bd-mobile-card .card-image img {  object-fit:cover; border-radius:8px; }
    .bd-mobile-card .card-body { display:flex; flex-direction:row; gap:6px; align-items: flex-end; padding-top: 14px; padding-bottom: 14px; }
    .bd-mobile-card .card-title { font-weight:600; font-size:14px; color: #0f172a; }
    .bd-mobile-card .card-meta { font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center; }
    .bd-mobile-card .card-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
    .bd-mobile-card .card-actions .quantidade-produto { width:56px; }
    .bd-mobile-card .card-actions .bd-selecao-radio { margin-bottom:6px; }
    .bd-mobile-similar-list { margin-top:8px; padding-left:8px; border-left:2px dashed var(--border); display:none; border-bottom: 2px dashed var(--border);
    margin-left: 28px; }
    .bd-mobile-similar-item .bd-cabecalho {
        display: flex
    }
    span.bd-selecao-produto {
        margin-right: 7px;
    }
    .bd-mobile-card.show-similares .bd-mobile-similar-list { display:block; }
    .bd-mobile-similar-item { display:flex; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid #f3f4f6; flex-wrap: wrap; }
}

/* Mobile: tornar footer fixo no viewport e evitar sobreposição do conteúdo */
@media (max-width: 720px) {
    .bd-table-footer {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 11000;
        box-shadow: 0 -8px 20px rgba(2,6,23,0.12);
        padding: 12px 14px;
        background: linear-gradient(180deg,var(--bg),#fbfcfd);
    }

    /* garantir espaço extra para o footer fixo (evita que o conteúdo fique escondido) */
    .bd-mobile-list { padding-bottom: 88px !important; }
    .bd-table-scroll { padding-bottom: 88px; }
}