@charset "utf-8";
/* CSS Document */

/* =========================================
   Airsoft Usado - Mobile Style (Dark/Light)
   ========================================= */

/* Tema base + tema ESCURO (padrão) */
:root {
    --am-accent: #f97316; /* laranja padrão */

    /* DARK DEFAULT */
    --am-bg: #0b0d10;
    --am-bg-soft: #151820;
    --am-bg-softer: #020617;
    --am-page-text: #f5f5f5;
    --am-muted-text: #9ca3af;
    --am-border-soft: rgba(255,255,255,0.08);
    --am-border-strong: rgba(255,255,255,0.18);
    --am-nav-bg: #0b0d10;
    --am-card-bg: #151820;
    --am-chip-bg: #151820;
    --am-tag-bg: #1e293b;
    --am-toast-bg: #222831;
    --am-link: #38bdf8;
}

/* Tema CLARO */
:root[data-theme="light"] {
    --am-bg: #f3f4f6;
    --am-bg-soft: #ffffff;
    --am-bg-softer: #e5e7eb;
    --am-page-text: #111827;
    --am-muted-text: #6b7280;
    --am-border-soft: rgba(0,0,0,0.06);
    --am-border-strong: rgba(0,0,0,0.12);
    --am-nav-bg: #ffffff;
    --am-card-bg: #ffffff;
    --am-chip-bg: #e5e7eb;   /* cinzinha ligeiramente mais escura que o fundo */
    --am-tag-bg: #e5e7eb;
    --am-toast-bg: #111827;
    --am-link: #1d4ed8;
}

/* ----------------------------------------- */

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--am-bg);
    color: var(--am-page-text);
}

/* Container principal da página */
.am-page {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 70px; /* espaço para bottom nav */
}

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

.am-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--am-nav-bg);
    border-bottom: 1px solid var(--am-border-soft);
    padding: 10px 16px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.am-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.am-logo-wrap {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.am-logo-img {
    height: 22px;
    display: block;
}

.am-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.am-icon-btn {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    color: var(--am-page-text);
    background: transparent;
}

.am-icon-btn i {
    font-size: 14px;
}

.am-icon-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #e03131;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   SEÇÕES, TÍTULOS, BREADCRUMB
   ========================================= */

.am-section {
    padding: 10px 16px 4px;
}

.am-section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--am-accent);
}

.am-section-title-accent {
    color: var(--am-accent);
}

.am-section-sub {
    font-size: 12px;
    color: var(--am-muted-text);
    margin-bottom: 8px;
}

/* variação para páginas que precisam de título maior */
.am-section--large .am-section-title {
    font-size: 20px;
}

/* breadcrumb + título de página */
.am-breadcrumb {
    font-size: 11px;
    color: var(--am-muted-text);
    margin: 0 0 4px;
}

.am-breadcrumb a {
    color: var(--am-muted-text);
    text-decoration: none;
}

.am-page-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--am-page-text);
}

/* opcional: página com título maior */
.am-section--large .am-page-title {
    font-size: 20px;
}

/* subtítulo genérico (blog/página estática) */
.am-subtitle {
    font-size: 13px;
    color: var(--am-muted-text);
    margin-bottom: 6px;
}

/* Gráfico BBs - mobile */
#bbsChart {
    width: 100% !important;
    max-width: 100%;
    height: 150px !important;   /* altura mais baixa */
    max-height: 150px !important;
}

/* =========================================
   BUSCA / FILTROS
   ========================================= */

/* busca simples (index) */
.am-search {
    padding: 12px 16px 4px;
}

.am-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--am-bg-soft);
    border-radius: 999px;
    padding: 8px 12px;
    margin-bottom: 8px; /* também funciona em categoria */
}

.am-search-form input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--am-page-text);
    font-size: 14px;
    outline: none;
}

.am-search-form button {
    border: none;
    background: #1c7ed6;
    color: #fff;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
}

/* box de filtros (categoria) */
.am-filter-box {
    background: var(--am-bg-soft);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.am-filter-box select,
.am-filter-box input {
    flex: 1 1 48%;
    min-width: 0;
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    background: var(--am-bg);
    color: var(--am-page-text);
    font-size: 12px;
    padding: 6px 10px;
    appearance: none;
    -webkit-appearance: none;
}

.am-filter-box select:focus,
.am-filter-box input:focus {
    outline: none;
    border-color: #1c7ed6;
}

.am-filter-box option {
    background: var(--am-bg);
    color: var(--am-page-text);
}

.am-filter-box button {
    flex: 1 1 100%;
    border: none;
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    background: #1c7ed6;
    color: #fff;
}

/* =========================================
   BANNERS / CHIPS
   ========================================= */

.am-banner-hero {
    padding: 8px 16px 4px;
}

.am-banner-hero img {
    width: 100%;
    border-radius: 18px;
    display: block;
}

.am-banner-faixa {
    padding: 6px 16px 4px;
}

.am-banner-faixa img {
    width: 100%;
    border-radius: 14px;
    display: block;
}

/* chips de categorias (index) */
.am-chips-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 16px 8px;
}

.am-chips-scroll::-webkit-scrollbar {
    display: none;
}

.am-chip-cat {
    flex: 0 0 auto;
    min-width: 90px;
    background: var(--am-chip-bg);
    border-radius: 12px;
    padding: 6px 8px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    color: var(--am-page-text);
}

.am-chip-cat img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 999px;
    margin-bottom: 4px;
}

/* =========================================
   TABS (index)
   ========================================= */

.am-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.am-tabs::-webkit-scrollbar {
    display: none;
}

.am-tab-btn {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    background: transparent;
    color: var(--am-page-text);
    font-size: 12px;
    cursor: pointer;
}

.am-tab-btn.active {
    background: var(--am-accent);
    border-color: var(--am-accent);
    color: #fff;
}

.am-tab-pane {
    display: none;
}

.am-tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* =========================================
   LISTA DE PRODUTOS (cards gerais)
   ========================================= */

.am-products {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.am-product-card {
    display: flex;
    gap: 10px;
    background: var(--am-card-bg);
    border-radius: 14px;
    padding: 8px;
}

.am-product-thumb {
    flex: 0 0 110px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--am-bg);
}

.am-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.am-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}

.am-product-category {
    font-size: 11px;
    color: var(--am-muted-text);
}

.am-product-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--am-page-text);
}

.am-product-title a {
    color: inherit;
    text-decoration: none;
}

.am-product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--am-muted-text);
}

.am-stars {
    display: inline-flex;
    gap: 1px;
}

.am-stars img {
    width: 10px;
    height: 10px;
}

/* status (desejos) */
.am-product-status {
    font-size: 11px;
    font-weight: 500;
}

.am-status-disponivel {
    color: #22c55e;
}

.am-status-vendido {
    color: #f97373;
}

/* preço */
.am-product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--am-page-text);
}

.am-product-price span.old {
    font-size: 11px;
    color: #f97373;
    text-decoration: line-through;
    margin-left: 4px;
    font-weight: 500;
}

/* tags */
.am-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.am-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--am-tag-bg);
    color: var(--am-page-text);
}

.am-tag.sale {
    background: #e03131;
    color: #fff;
}

.am-tag.best {
    background: #f59f00;
    color: #1f2937;
}

.am-tag.oferta {
    background: #12b886;
    color: #081217;
}

.am-tag.vendido {
    background: #4b5563;
    color: #e5e7eb;
}

/* ações em cards */
.am-product-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* botão pequeno (pílula) */
.am-small-icon-btn {
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
    color: var(--am-page-text);
    background: transparent;
}

.am-small-icon-btn i {
    font-size: 12px;
    margin-right: 4px;
}

/* variação só ícone redondo */
.am-small-icon-circle {
    width: 28px;
    padding: 0;
}

.am-small-icon-btn.am-small-icon-circle {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.am-small-icon-btn.am-small-icon-circle i {
    font-size: 16px;
    line-height: 1;
}

/* botão de lixeira (lista de desejos) */
.am-icon-trash-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin-left: 4px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.am-icon-trash-btn i {
    font-size: 13px;
    color: var(--am-muted-text);
    transition: color .15s ease, transform .1s ease;
}

.am-icon-trash-btn:hover i,
.am-icon-trash-btn:focus i {
    color: #f97373;
    transform: translateY(-1px);
}

/* =========================================
   CARD DE LEILÃO (index)
   ========================================= */

.am-leilao-card {
    margin-top: 6px;
    padding: 10px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.am-leilao-overlay {
    display: inline-flex;
    flex-direction: column;
    max-width: 65%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    border-radius: 14px;
    padding: 12px 14px;
}

.am-leilao-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #f9fafb;
}

.am-leilao-meta {
    font-size: 12px;
    color: #e5e7eb;
    margin-bottom: 4px;
}

.am-leilao-countdown {
    font-size: 12px;
    color: #fbbf24;
    margin-bottom: 6px;
}

/* =========================================
   BOTÃO PRINCIPAL
   ========================================= */

.am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    font-size: 15px;
    border-radius: 999px;
    background: #1c7ed6 !important;
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

/* ajusta o botão “cheio” pra não ficar cortado nas laterais */
.am-btn-full {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* opcional, só para esse botão da home */
.am-section .am-btn-full {
    margin-top: 4px;
    margin-bottom: 4px;
}

.am-btn:hover,
.am-btn:focus {
    background: var(--am-accent) !important;
    color: #fff !important;
    text-decoration: none;
}

/* botão desabilitado (leilão) */
.am-btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

/* =========================================
   BOTTOM NAV
   ========================================= */

.am-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    border-top: 1px solid var(--am-border-soft);
    background: var(--am-nav-bg);
}

.am-bottom-nav-inner {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    padding: 6px 0 8px;
}

.am-bottom-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--am-muted-text);
    text-decoration: none;
}

.am-bottom-item span.icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.am-bottom-item span.icon i {
    font-size: 12px;
}

.am-bottom-item.active {
    color: var(--am-page-text);
}

.am-bottom-item.active span.icon {
    background: #1c7ed6;
    border-color: #1c7ed6;
    color: #fff;
}

/* =========================================
   TOAST MOBILE (global)
   ========================================= */

.mobile-toast-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 80px; /* fica acima da bottom-nav */
    z-index: 9999;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.mobile-toast {
    width: calc(100% - 32px);
    max-width: 480px;
    background: var(--am-toast-bg);
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.4;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    text-align: center;
}

.mobile-toast--success {
    border: 1px solid #14a44d;
}

.mobile-toast--error {
    border: 1px solid #ff4b4b;
}

.mobile-toast--show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   COMPONENTES DE FORM (login, cadastro, recuperar)
   ========================================= */

.am-columns {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.am-card {
    background: var(--am-card-bg);
    border-radius: 16px;
    padding: 14px 14px 16px;
    overflow: hidden;
}

.am-card h2 {
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--am-page-text);
}

.am-card p {
    font-size: 12px;
    color: var(--am-muted-text);
    margin: 0 0 10px;
}

.am-form-group {
    margin-bottom: 10px;
}

.am-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    background: var(--am-bg);
    color: var(--am-page-text);
    font-size: 14px;
    padding: 9px 12px;
    outline: none;
}

.am-input::placeholder,
#comentario-texto::placeholder {
    color: var(--am-muted-text);
}

.am-input:focus {
    border-color: #1c7ed6;
}

/* rodapé do form (links) */
.am-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-bottom: 8px;
    gap: 8px;
}

.am-form-footer a {
    color: var(--am-muted-text);
    text-decoration: none;
    white-space: nowrap;
}

.am-form-footer a:hover {
    color: var(--am-page-text);
}

/* variação alinhada à direita (recuperar_senha) */
.am-form-footer--right {
    justify-content: flex-end;
}

/* link menor (criar conta) */
.am-link-small {
    font-weight: 500;
}

/* checkbox de termos (cadastro) */
.am-check {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: var(--am-muted-text);
    margin-bottom: 10px;
}

.am-check input[type="checkbox"] {
    margin-top: 2px;
}

.am-check a {
    color: var(--am-muted-text);
    text-decoration: underline;
}

/* ALERTAS GLOBAL (forms e avaliações) */
.am-alert {
    margin: 8px auto 0;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    display: none;
}

.am-alert-success {
    background: rgba(34,197,94,0.12);
    color: #bbf7d0;
    border: 1px solid rgba(34,197,94,0.50);
}

.am-alert-danger {
    background: rgba(248,113,113,0.12);
    color: #fecaca;
    border: 1px solid rgba(248,113,113,0.5);
}

/* alerta de inatividade (leilão) */
.am-alert-warning {
    background: #451a03;
    border: 1px solid #f97316;
    color: #fed7aa;
}

/* divisor "ou" */
.am-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 4px;
    font-size: 11px;
    color: #6b7280;
}

/* divisor "ou" */
.am-divider::before,
.am-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--am-border-soft); /* no lugar do #272b35 */
    margin: 0 8px;
}

/* BOTÃO GOOGLE - formato oficial */
.am-google-wrap {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.btn-google {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #4285F4;
    font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
    background: #4285F4;
    min-width: 280px;
    max-width: 100%;
    height: 40px;
}

.btn-google:hover,
.btn-google:focus {
    text-decoration: none;
    filter: brightness(0.95);
}

.btn-google .google-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    width: 40px;
    height: 100%;
}

.btn-google .google-text-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: 100%;
}

.btn-google .google-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('https://www.airsoftusado.com.br/img/google.svg') no-repeat center;
    background-size: contain;
}

.btn-google .google-text {
    color: #FFFFFF;
    white-space: nowrap;
}

/* =========================================
   ESTADOS DE LISTA VAZIA
   ========================================= */

.am-empty {
    padding: 20px 16px 8px;
    text-align: center;
    color: var(--am-muted-text);
    font-size: 14px;
}

.am-empty a {
    color: var(--am-accent);
    text-decoration: none;
    font-weight: 500;

}

/* =========================================
   PAGINAÇÃO
   ========================================= */

.am-pagination {
    padding: 10px 16px 14px;
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
}

.am-page-link {
    min-width: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    background: var(--am-bg-softer);
    color: var(--am-page-text);
    text-decoration: none;
    text-align: center;
    font-size: 12px;
}

.am-page-link.active {
    background: #1c7ed6;
    border-color: #1c7ed6;
    color: #fff;
    font-weight: 600;
}

/* =========================================
   PRODUTO - PÁGINA DETALHE
   ========================================= */

/* imagem principal */
.am-prod-img-card {
    padding: 8px 16px 4px;
}

.am-prod-img-wrap {
    background: var(--am-card-bg);
    border-radius: 20px;
    padding: 8px;
}

.am-prod-img-wrap img {
    width: 100%;
    border-radius: 16px;
    display: block;
    object-fit: cover;
}

/* card principal */
.am-prod-card {
    background: var(--am-card-bg);
    border-radius: 18px;
    padding: 14px 14px 16px;
}

.am-prod-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--am-page-text);
}

/* selos (oferta, oportunidade, etc.) */
.am-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 10px;
}

.am-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
}

.am-badge-oferta {
    background: #064e3b;
    color: #bbf7d0;
}

.am-badge-oportunidade {
    background: #78350f;
    color: #fed7aa;
}

.am-badge-desconto {
    background: #1d4ed8;
    color: #dbeafe;
}

.am-badge-vendido {
    background: #4b5563;
    color: #e5e7eb;
}

/* preço - padrão (produto normal) */
.am-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.am-price-main {
    font-size: 18px;
    font-weight: 700;
    color: var(--am-page-text);
}

.am-price-old {
    font-size: 13px;
    color: #f97373;
    text-decoration: line-through;
}

/* variação coluna (leilão) */
.am-price-row--column {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.am-price-off {
    font-size: 12px;
    color: #fbbf24;
    font-weight: 600;
}

.am-price-label {
    font-size: 12px;
    color: var(--am-muted-text);
}

.am-price-inc {
    font-size: 13px;
    font-weight: 600;
    color: #a1cae2;
}

/* textos do produto */
.am-prod-short {
    font-size: 13px;
    color: var(--am-page-text);
    margin: 6px 0 4px;
}

.am-prod-note {
    font-size: 13px;
    font-weight: 600;
    color: #fbbf24;
    margin-bottom: 8px;
}

/* metadados do produto (estado, cidade, anunciante, etc.) */
.am-prod-meta {
    font-size: 12px;
    color: var(--am-muted-text);
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.am-prod-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.am-prod-meta-item i {
    font-size: 12px;
    color: #facc15;
}

/* status texto (leilão) */
.am-status-tag {
    font-weight: 600;
}

.am-status-expirado {
    color: #facc15;
}

/* ações principais da página de produto */
.am-prod-actions-main {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* descrição + compartilhar */
.am-desc-card {
    background: var(--am-card-bg);
    border-radius: 18px;
    padding: 12px 14px 16px;
    margin-top: 4px;
}

.am-desc-card h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--am-page-text);
}

.am-desc-text {
    font-size: 13px;
    color: var(--am-page-text);
}

/* botões de compartilhar (produtos e páginas) */
.au-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.au-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    background: var(--am-bg-softer);
    color: var(--am-page-text);
    font-size: 13px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .1s ease;
}

.au-share-btn:hover {
    background: #1c7ed6;
    border-color: #1c7ed6;
    transform: translateY(-1px);
    color: #fff;
}

.au-share-btn i {
    font-size: 14px;
}

/* =========================================
   LEILÃO - PÁGINA DETALHE
   ========================================= */

/* contador */
.am-auction-countdown {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #020617;
    border: 1px solid rgba(250, 204, 21, 0.4);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #fde68a;
}

/* status (cores específicas) */
.am-status-disponivel {
    color: #22c55e;
}

.am-status-vendido {
    color: #f97373;
}

/* últimos lances */
.am-bids-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.am-bid-item {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.am-bid-main {
    font-weight: 600;
}

.am-bid-1 {
    color: #22c55e;
}

.am-bid-2 {
    color: #eab308;
}

.am-bid-3 {
    color: #f97373;
}

.am-bid-empty {
    font-size: 13px;
    color: var(--am-muted-text);      /* antes #e5e7eb fixo */
}

/* =========================================
   PRODUTOS RELACIONADOS (carrossel)
   ========================================= */

.am-rel-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-top: 4px;
}

.am-rel-scroll::-webkit-scrollbar {
    display: none;
}

/* escopando para não afetar lista principal */
.am-rel-scroll .am-product-card {
    flex: 0 0 190px;
    background: var(--am-card-bg);
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.am-rel-scroll .am-product-thumb {
    border-radius: 12px;
    overflow: hidden;
    background: var(--am-bg-softer);
}

.am-rel-scroll .am-product-thumb img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.am-rel-scroll .am-product-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: var(--am-page-text);
}

.am-rel-scroll .am-product-price {
    font-size: 13px;
    font-weight: 600;
}

.am-rel-scroll .am-product-price span.old {
    font-size: 11px;
    color: #f97373;
    text-decoration: line-through;
    margin-left: 4px;
}

/* =========================================
   BLOG - LISTA DE POSTS
   ========================================= */

.am-post-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.am-post-card {
    background: var(--am-card-bg);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.am-post-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--am-bg-softer);
}

.am-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.am-post-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.am-post-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--am-page-text);
}

.am-post-title a {
    color: inherit;
    text-decoration: none;
}

.am-post-meta {
    font-size: 11px;
    color: var(--am-muted-text);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.am-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.am-post-meta i {
    font-size: 11px;
    color: #facc15;
}

.am-post-resumo {
    font-size: 13px;
    color: var(--am-page-text);
}

/* rodapé do post */
.am-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--am-muted-text);
}

.am-post-footer-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.am-post-footer-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* botão de like (post e página) */
.am-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--am-muted-text); /* adapta ao tema */
    text-decoration: none;
}

.am-like-btn i {
    font-size: 14px;
    color: #f97316; /* laranja sempre visível */
}

:root[data-theme="dark"] .am-like-btn {
    color: #e5e7eb; /* um pouco mais claro no dark */
}

/* =========================================
   PÁGINA DE ARTIGO (pagina.php)
   ========================================= */

.am-article-card {
    background: var(--am-card-bg);
    border-radius: 18px;
    padding: 12px 14px 16px;
}

.am-article-thumb {
    margin: 0 16px 8px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--am-bg-softer);
    aspect-ratio: 4 / 3;
}

.am-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.am-article-meta {
    font-size: 11px;
    color: var(--am-muted-text);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.am-article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.am-article-meta i {
    font-size: 11px;
    color: #facc15;
}

.am-article-body {
    font-size: 14px;
    color: var(--am-page-text);
    line-height: 1.5;
}

.am-article-body h1,
.am-article-body h2,
.am-article-body h3,
.am-article-body h4 {
    color: var(--am-page-text);
}

.am-article-body a {
    color: var(--am-link);
}

.am-article-footer {
    margin-top: 12px;
    font-size: 12px;
    color: var(--am-muted-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.am-article-footer-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.am-article-footer-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* =========================================
   AVALIAÇÃO DO VENDEDOR / REPUTAÇÃO
   ========================================= */

.am-seller-rating-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.am-seller-rating-stars {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.am-seller-rating-stars img {
    width: 14px;
    height: 14px;
}

.am-seller-rating-text {
    font-size: 13px;
    color: var(--am-page-text);
}

.am-seller-rating-text span {
    font-size: 12px;
    color: var(--am-muted-text);
}

/* lista de avaliações */
.am-review-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.am-review-card {
    background: var(--am-card-bg);      /* agora clareia no tema light */
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
}

.am-review-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--am-bg-softer);    /* varia com o tema */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--am-page-text);
}

.am-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.am-review-body {
    flex: 1;
}

.am-review-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--am-page-text);
}

.am-review-date {
    font-size: 11px;
    color: var(--am-muted-text);
    margin-bottom: 4px;
}

.am-review-stars {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 4px;
}

.am-review-stars img {
    width: 12px;
    height: 12px;
}

.am-review-text {
    font-size: 13px;
    color: var(--am-page-text);         /* antes era quase branco fixo */
}

/* formulário de avaliação */
.am-eval-card-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.am-eval-textarea {
    width: 100%;
    min-height: 80px;
    border-radius: 10px;
    border: 1px solid var(--am-border-strong);
    background: var(--am-bg-soft);   /* antes #020617 */
    color: var(--am-page-text);      /* antes #f9fafb */
    padding: 8px;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}

.am-eval-select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--am-border-strong);
    background: var(--am-bg-soft);
    color: var(--am-page-text);
    padding: 6px 8px;
    font-size: 13px;
    margin-top: 8px;
    box-sizing: border-box;
}

/* =========================================
   COMENTÁRIOS – pagina.php (mobile)
   ========================================= */

/* bloco inteiro da seção de comentários */
.am-comments-section {
    padding: 10px 16px 16px;
}

.am-comments-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--am-page-text);
}

.am-comments-count {
    font-size: 12px;
    color: var(--am-muted-text);
    margin-bottom: 8px;
}

/* remove a bolinha do <li> */
.am-comments-list,
ul.am-comments-list,
ul.am-comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

/* cada comentário */
.am-comment-item {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--am-border-soft); /* antes rgba fixo */
}

.am-comment-item:last-child {
    border-bottom: none;
}

/* cabeçalho do comentário (avatar + nome + data + botão) */
.am-comment-header {
    margin-bottom: 4px;
}

.am-comment-user {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* avatar */
.am-comment-avatar {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--am-bg-softer); /* era #111827 */
}

.am-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* bloco com nome, data e botão responder */
.am-comment-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.am-comment-author {
    display: block;
    font-weight: 600;
    color: var(--am-page-text);
    margin-bottom: 2px;
}

.am-comment-date {
    font-size: 11px;
    color: var(--am-muted-text);
}

/* texto do comentário */
.am-comment-body,
.am-comment-text {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 6px;
    white-space: pre-wrap;
    color: var(--am-page-text); /* era #e5e7eb */
}

/* botão "Responder" */
.am-comment-user-meta .am-comment-reply-btn {
    align-self: flex-start;
    margin-top: 4px;
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    background: var(--am-bg-softer);
    color: var(--am-page-text);
    font-size: 11px;
    padding: 2px 10px;
    cursor: pointer;
    transition: background .2s ease,
                border-color .2s ease,
                color .2s ease,
                transform .1s ease;
}

.am-comment-user-meta .am-comment-reply-btn:hover,
.am-comment-user-meta .am-comment-reply-btn:focus {
    background: #1c7ed6;
    border-color: #1c7ed6;
    color: #fff;
    transform: translateY(-1px);
}

/* formulário de novo comentário */
.am-comment-form {
    border-top: 1px solid var(--am-border-soft);
    margin-top: 10px;
    padding-top: 10px;
}

.am-comment-form label {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--am-page-text); /* era #e5e7eb */
}

/* textarea */
#comentario-texto {
    width: 100%;
    min-height: 80px;
    border-radius: 12px;
    border: 1px solid var(--am-border-strong);
    background: var(--am-bg-soft);  /* era #020617 */
    color: var(--am-page-text);     /* era #f9fafb */
    padding: 8px 10px;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}

#comentario-texto::placeholder {
    color: #6b7280;
}

/* linha dos botões do form */
.am-comment-form-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* botão "Cancelar resposta" */
#btn-cancelar-resposta {
    border-radius: 999px;
    border: 1px solid var(--am-border-strong);
    background: transparent;
    color: var(--am-page-text); /* era #e5e7eb */
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
}

#btn-cancelar-resposta:hover,
#btn-cancelar-resposta:focus {
    background: var(--am-bg-soft); /* em vez de #111827 */
}

/* aviso "Respondendo @Fulano" */
#comentario-reply-info {
    margin-top: 6px;
    font-size: 12px;
    color: var(--am-muted-text);
}

#comentario-reply-info span {
    color: var(--am-page-text); /* era #f9fafb */
    font-weight: 600;
}

/* Força lista de comentários sem bolinha dentro da seção */
.am-comments-section ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 10px;
}

.am-comments-section ul li {
    margin-left: 0;
}

.am-bbs-card {
    background: var(--am-card-bg);
    border-radius: 18px;
    padding: 14px 16px;
    margin: 8px 16px;
}

/* BBs – helpers */
.pg-bbs .am-bbs-muted {
    font-size: 13px;
    color: var(--am-muted-text);
}

.pg-bbs .am-bbs-small-muted {
    font-size: 11px;
    color: var(--am-muted-text);
}

.pg-bbs .am-bbs-list {
    padding-left: 18px;
    font-size: 13px;
    margin: 6px 0 0;
    color: var(--am-page-text);
}

.am-btn-disabled {
    opacity: .6;
    pointer-events: none;
}

/* botão da bottom-nav com mesmo estilo dos links */
.am-bottom-nav button.am-bottom-item {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 10px;      /* mesmo tamanho dos outros */
    line-height: 1.2;
    font-weight: 400;
    cursor: pointer;
}

.am-bottom-nav button.am-bottom-item:focus {
    outline: none;
}
/* por padrão mostra a logo dark */
.am-logo-light {
    display: none;
}

/* quando estiver no tema claro, troca as logos */
:root[data-theme="light"] .am-logo-dark {
    display: none;
}
:root[data-theme="light"] .am-logo-light {
    display: block;
}