/* CSS base para listas e sliders de leilões Bidoro Auction Lists Pro */

:root{
  --bal-orange:#F36D22;
  --bal-green:#007940;
  --bal-bg:#f5f5f5;
  --bal-ink:#0a0a0a;
  --bal-muted:#5f6b7a;
  --bal-line:#eef2f6;
  --bal-card-bg:#ffffff;
  --bal-card-border:#eef2f6;
  --bal-radius:16px;
  --bal-shadow:0 10px 24px rgba(0,0,0,.08);
  --bal-danger:#d92d20;
  --bal-card-padding:16px;
  --bal-title-color:#0a0a0a;
  --bal-meta-color:#5f6b7a;
  --bal-price-color:#0a0a0a;
  --bal-timer-color:#0a0a0a;
  --bal-badge-bg:#fff1f0;
  --bal-badge-text:#b42318;
  --bal-chip-bg:#ffffff;
  --bal-chip-border:#eef2f6;
  --bal-btn-bg:#007940;
  --bal-btn-bg-hover:#008d4a;
  --bal-timer-dot-green:#007940;
  --bal-timer-dot-red:#d92d20;
}

.bal-auctions{
  margin:24px 0;
}

.bal-auctions-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(1,minmax(0,1fr));
}

.bal-auction-card{
  background:var(--bal-card-bg);
  border:1px solid var(--bal-card-border);
  border-radius:var(--bal-radius);
  overflow:hidden;
  box-shadow:var(--bal-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.bal-auction-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.12);
}

.bal-auction-media{
  position:relative;
  background:var(--bal-bg);
  aspect-ratio:4/3;
  display:block;
  overflow:hidden;
}
.bal-auction-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain !important;
}

.bal-badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  border-radius:999px;
}
.bal-badge-alert{
  background:var(--bal-badge-bg);
  color:var(--bal-badge-text);
  border:1px solid rgba(180,35,24,0.15);
}

.bal-bids-chip{
  position:absolute;
  top:10px;
  right:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--bal-chip-bg);
  border:1px solid var(--bal-chip-border);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.bal-bids-chip img{
  width:16px;
  height:16px;
  display:block;
  object-fit:contain !important;
}

.bal-auction-body{
  padding:var(--bal-card-padding);
  padding-bottom:8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bal-auction-title{
  margin:0;
  line-height:1.35;
  font-weight:700;
  color:var(--bal-title-color);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.bal-auction-title a{
  color:inherit;
  text-decoration:none;
}

.bal-meta-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--bal-meta-color);
}
.bal-meta-row-bottom{
  justify-content:space-between;
}

.bal-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--bal-line);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--bal-meta-color);
  background:#fafbfd;
}

.bal-price{
  font-weight:700;
  line-height:1;
  color:var(--bal-price-color);
}
.bal-price small{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--bal-meta-color);
  margin-top:6px;
}

.bal-timer{
  margin-left:auto;
  font-weight:700;
  font-size:14px;
  color:var(--bal-timer-color);
  display:flex;
  align-items:center;
  gap:8px;
}
.bal-timer-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--bal-timer-dot-green);
  box-shadow:0 0 0 6px rgba(0,121,64,.08);
}
.bal-timer.soon .bal-timer-dot{
  background:var(--bal-timer-dot-red);
  box-shadow:0 0 0 6px rgba(217,45,32,.10);
}
.bal-timer.under-hour{
  color:var(--bal-danger);
}

@keyframes bal-pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.bal-timer.pulsing{
  animation:bal-pulse 1.2s ease-in-out infinite;
}

.bal-auction-foot{
  padding:0 var(--bal-card-padding) 14px var(--bal-card-padding);
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
}

.bal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:0 16px;
  font-weight:700;
  text-decoration:none;
  transition:filter .15s ease, transform .05s ease, background .15s ease;
  min-width:120px;
  background:var(--bal-btn-bg);
  height:44px;
}
.bal-btn:hover{
  filter:brightness(1.03);
  transform:translateY(1px);
  background:var(--bal-btn-bg-hover);
}

.bal-layout-slider .bal-slider {
    position: relative;
    /* Removemos o overflow:hidden para permitir que o track gira o scroll, 
       mas mantemos a estrutura segura */
    overflow: hidden; 
}
.bal-slider-track {
    display: flex;
    /* O SEGREDO: Permitir scroll horizontal nativo */
    overflow-x: auto;
    overflow-y: hidden;
    
    /* FÍSICA: scroll-snap obriga a parar no início de cada cartão */
    scroll-snap-type: x mandatory;
    
    /* Suavidade para os botões e autoplay */
    scroll-behavior: smooth;
    
    /* Momentum no iOS (iPhone/iPad) para deslizar rápido */
    -webkit-overflow-scrolling: touch;
    
    /* Remove a barra de scroll visualmente */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    /* Garante que os items não encolhem */
    width: 100%;
}
.bal-slider-slide{
  flex:0 0 auto;
  padding:0 9px;
  box-sizing:border-box;
}
.bal-slider-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  background:#ffffff;
  border-radius:999px;
  border:1px solid var(--bal-line);
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.bal-slider-prev{ left:6px; }
.bal-slider-next{ right:6px; }

.bal-pagination{
  margin-top:16px;
}
.bal-pagination ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.bal-pagination li a{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--bal-line);
  text-decoration:none;
  font-size:13px;
  color:var(--bal-ink);
}
.bal-pagination li.active a{
  background:var(--bal-btn-bg);
  color:#fff;
  border-color:var(--bal-btn-bg);
}

.bal-empty{
  margin:12px 0;
  color:var(--bal-muted);
}

.bal-sort-controls{
  margin-top:16px;
}
.bal-sort-controls select{
  min-width:220px;
}











/* =========================
   CARTÃO ESTILO "BIDORO"
   ========================= */

/* Cartão base */
.bal-auction-card {
    background: #ffffff;
    border-radius: 26px;
    border: 1px solid #eef2f6;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Topo: imagem */
.bal-auction-media {
    position: relative;
    display: block;
    background: #f5f5f5;
    padding: 14px;
    border-bottom: 1px solid #edf1f5;
}

.bal-auction-media img {
    width: 100%;
    object-fit: contain !important;
}

/* Chip de licitações (canto sup. direito) */
.bal-bids-chip {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #ffffff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

.bal-bids-chip img,
.bal-bids-chip svg {
    width: 16px;
    height: 16px;
}

/* Badge "A terminar" */
.bal-badge-alert {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff1f0;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

/* Corpo */
.bal-auction-body {
    padding: 18px 18px 10px;
    text-align: center;
}

/* Título */
.bal-auction-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.bal-auction-title a {
    color: inherit;
    text-decoration: none;
}

/* Secções "Tempo restante" + "Valor atual" */
.bal-section {
    margin-bottom: 14px;
}

.bal-section-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 4px;
}

/* Timer */
.bal-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
}

.bal-timer-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--bal-timer-dot-green, #22c55e);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15);
}

.bal-timer.soon .bal-timer-dot {
    background: var(--bal-timer-dot-red, #ef4444);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.15);
}

/* Valor atual */
.bal-section-price {
    margin-top: 4px;
}

.bal-price {
    font-size: 28px;
    font-weight: 900;
    color: #000000;
    line-height: 1.1;
}

.bal-price small {
    display: none; /* o label já está por cima em .bal-section-label */
}

/* Rodapé (data + watchers) */
.bal-auction-foot {
    padding: 10px 14px;
    border-top: 1px solid #edf1f5;
    background: #f9fafb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bal-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef1f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 500;
}

.bal-pill svg {
    opacity: 0.7;
}

/* Botão "VER LEILÃO" full width no fundo */
.bal-card-cta {
    background: var(--bal-btn-bg, #007940);
    border-radius: 0 0 26px 26px;
    overflow: hidden;
}

.bal-card-cta .bal-btn {
    background: transparent !important;
    border-radius: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff !important;
    padding: 0;
}

/* respeita a altura dinâmica que vem do PHP, mas centra o texto */
.bal-card-cta .bal-btn {
    line-height: 1;
}

.bal-card-cta .bal-btn:hover {
    background: rgba(0,0,0,0.06) !important;
}





/* =========================================
   1. BARRA DE ORDENAÇÃO (SORT) - MODERNA
   ========================================= */

/* O container principal empurra tudo para a direita */
.bal-toolbar {
    display: flex;
    justify-content: flex-end; /* Encosta à direita */
    margin-bottom: 24px;
    padding: 0 4px; /* Pequena margem de segurança */
}

/* O "bloco" visual do sort */
.bal-sort-controls {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 8px 20px; 
    border-radius: 50px; /* Cápsula redonda */
    box-shadow: 0 4px 20px rgba(0,0,0,0.06); /* Sombra suave para destacar do fundo */
    border: 1px solid rgba(0,0,0,0.05); /* Borda subtil */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bal-sort-controls:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.09);
}

/* Texto "Ordenar por:" */
.bal-sort-controls label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #9ca3af; /* Cinzento suave */
    margin: 0;
    white-space: nowrap;
}

/* O seletor dropdown em si */
.bal-sort-controls select {
    border: none;
    background-color: transparent;
    margin: 0;
    padding: 4px 24px 4px 0; /* Espaço à direita para a seta */
    font-size: 14px;
    font-weight: 700;
    color: var(--bal-ink, #0a0a0a);
    cursor: pointer;
    outline: none;
    min-width: unset; /* Remove largura forçada */
    box-shadow: none;
}

/* Foca na cor da marca quando ativo */
.bal-sort-controls select:focus {
    color: var(--bal-btn-bg, #007940);
}


/* =========================================
   3. SLIDER MOBILE - TOUCH & HIDE NAV
   ========================================= */

@media (max-width: 768px) {
    /* Esconder setas de navegação em mobile */
    .bal-slider-nav {
        display: none !important;
    }
}

.bal-slider-slide {
    flex: 0 0 auto;
    /* O cartão é o ponto de paragem magnético */
    scroll-snap-align: start;
    box-sizing: border-box;
}

.bal-slider-track::-webkit-scrollbar {
    display: none;
}