/* =============================================
   SISTEMA — PUBLIC CSS v3 — 100% RESPONSIVO
   ============================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
    font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
    background:var(--bg,#FFFFFF);
    color:var(--text,#1E293B);
    line-height:1.6;font-size:15px;overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--text)}
img{max-width:100%;height:auto}

/* ========== NAVBAR ========== */
:root {
    --navbar-h: 64px; /* altura total da navbar — usada no sticky das sidebars */
}
#mainNav{
    background:var(--bg-nav,#fff);
    border-bottom:1px solid var(--border,#e2e8f0);
    padding:8px 0;
    position:sticky;top:0;z-index:500;
    transition:box-shadow .2s ease;
    height:var(--navbar-h);
}
#mainNav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,0.08)}

#mainNav .container{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    position:relative;
}

/* Marca */
.navbar-brand{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:1.25rem;font-weight:800;
    color:var(--primary,#6C63FF)!important;
    display:flex;align-items:center;gap:7px;
    letter-spacing:-.5px;white-space:nowrap;
    flex-shrink:0;text-decoration:none;
}
.navbar-brand img{height:30px;width:auto}
.brand-dot{
    width:9px;height:9px;background:var(--primary,#6C63FF);
    border-radius:50%;display:inline-block;flex-shrink:0;
    animation:pulseDot 2.5s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{box-shadow:0 0 6px var(--primary-dim)}50%{box-shadow:0 0 16px var(--primary)}}

/* Navbar collapse — desktop: flex, mobile: none */
.navbar-collapse{display:flex!important;align-items:center;flex:1;gap:4px}

/* Links de navegação — apenas desktop */
.navbar-nav{
    display:flex;flex-direction:row;align-items:center;
    list-style:none;padding:0;margin:0;gap:2px;
    flex-shrink:1;overflow:hidden;
}
.nav-item{flex-shrink:0}
.nav-link{
    color:var(--text-muted,#64748b)!important;
    font-weight:500;border-radius:8px;
    padding:6px 11px!important;
    font-size:.85rem;transition:.2s ease;
    white-space:nowrap;
}
.nav-link:hover,.nav-link.active{
    color:var(--primary,#6C63FF)!important;background:var(--primary-dim)
}

/* Área direita: search + ações */
.navbar-right{
    display:flex;align-items:center;gap:6px;
    margin-left:auto;flex-shrink:0;
}

/* Search */
.search-mini{display:flex;align-items:center}
.search-mini .form-control{
    background:var(--bg-card);border:1px solid var(--border);
    color:var(--text);border-radius:8px 0 0 8px;
    font-size:.82rem;width:140px;
    transition:width .3s ease;
    height:36px;padding:6px 12px;
}
.search-mini .form-control:focus{
    box-shadow:none;border-color:var(--primary);
    width:180px;background:var(--bg-card);color:var(--text)
}
.search-mini .btn{
    border-radius:0 8px 8px 0;
    height:36px;padding:0 12px;
    display:flex;align-items:center;
}

/* Botão hamburguer */
.navbar-toggler{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:8px;
    width:36px;height:36px;
    display:none;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;
    font-size:1.1rem;color:var(--text);
    transition:.2s ease;
}
.navbar-toggler:hover{border-color:var(--primary);color:var(--primary)}

/* Menu mobile (offcanvas) */
.navbar-mobile{
    position:fixed;inset:0;z-index:9999;
    display:none;
}
.navbar-mobile.open{display:block}
.navbar-mobile-backdrop{
    position:absolute;inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(3px);
}
.navbar-mobile-panel{
    position:absolute;top:0;right:0;
    width:min(300px,85vw);height:100%;
    background:var(--bg-card);
    box-shadow:-8px 0 40px rgba(0,0,0,.15);
    display:flex;flex-direction:column;
    overflow-y:auto;
    animation:slideInRight .25s ease;
}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}

.navbar-mobile-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:1px solid var(--border);
}
.navbar-mobile-close{
    background:none;border:none;font-size:1.4rem;
    color:var(--text-muted);cursor:pointer;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:8px;
}
.navbar-mobile-close:hover{background:var(--bg-surface);color:var(--text)}

.navbar-mobile-body{padding:12px;flex:1}
.navbar-mobile-link{
    display:flex;align-items:center;gap:10px;
    padding:11px 14px;border-radius:10px;
    color:var(--text-muted);text-decoration:none;
    font-weight:500;font-size:.92rem;
    transition:.2s ease;margin-bottom:2px;
}
.navbar-mobile-link:hover{background:var(--primary-dim);color:var(--primary)}
.navbar-mobile-link i{width:18px;text-align:center;font-size:.95rem;color:var(--primary);opacity:.7}
.navbar-mobile-divider{height:1px;background:var(--border);margin:10px 0}

.navbar-mobile-footer{padding:14px;border-top:1px solid var(--border)}
.navbar-mobile-footer .btn{width:100%;margin-bottom:6px;justify-content:center}

/* Dropdown */
.dropdown-menu{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.1);
    min-width:200px;
}
.dropdown-item{color:var(--text);font-size:.88rem;transition:.15s ease;padding:8px 16px}
.dropdown-item:hover{background:var(--primary-dim);color:var(--primary)}
.dropdown-header{color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:1px}
.dropdown-divider{border-color:var(--border)}
.notif-dropdown{min-width:290px;max-height:380px;overflow-y:auto}

/* Notificação bell */
.btn-outline-notif{
    background:var(--bg-card);color:var(--text-muted);
    border:1px solid var(--border);border-radius:10px;
    width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    padding:0;position:relative;transition:.2s ease;
    flex-shrink:0;
}
.btn-outline-notif:hover{color:var(--primary);border-color:var(--primary)}
.badge-notif{
    position:absolute;top:-4px;right:-4px;
    background:var(--accent,#F472B6);color:#fff;
    font-size:9px;font-weight:700;border-radius:50%;
    width:16px;height:16px;
    display:flex;align-items:center;justify-content:center;
}

/* Botões usuário */
.btn-user{
    background:var(--bg-card);color:var(--text);
    border:1px solid var(--border);border-radius:10px;
    font-size:.83rem;font-weight:500;
    padding:6px 12px;height:36px;
    display:flex;align-items:center;gap:6px;
    transition:.2s ease;white-space:nowrap;flex-shrink:0;
}
.btn-user:hover{border-color:var(--primary);color:var(--primary)}

/* ========== BOTÕES ========== */
.btn-accent{background:var(--primary);color:#fff;border:none;border-radius:10px;font-weight:600;transition:.2s ease;cursor:pointer}
.btn-accent:hover{background:var(--primary-dark,#5a52e0);color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px var(--primary-dim)}
.btn-outline-accent{border:2px solid var(--primary);color:var(--primary);background:transparent;border-radius:10px;font-weight:600;transition:.2s ease;cursor:pointer}
.btn-outline-accent:hover{background:var(--primary);color:#fff}
.btn-whatsapp{background:#25D366;color:#fff;border:none;border-radius:9px;font-weight:600;font-size:.88rem;transition:.2s ease;display:inline-flex;align-items:center;gap:6px}
.btn-whatsapp:hover{background:#1eb855;color:#fff;transform:translateY(-1px)}

/* ========== HERO ========== */
.hero{
    padding:70px 0 60px;position:relative;overflow:hidden;
    background:linear-gradient(135deg,var(--bg) 0%,var(--bg-card) 100%)
}
.hero::before{
    content:'';position:absolute;top:-100px;right:-80px;
    width:480px;height:480px;
    background:radial-gradient(circle,var(--primary-dim) 0%,transparent 70%);
    pointer-events:none;
}
.hero-title{
    font-size:clamp(1.8rem,5vw,3.8rem);
    font-weight:800;line-height:1.15;
    letter-spacing:-1.5px;color:var(--text)
}
.hero-accent{color:var(--primary)}
.hero-sub{font-size:clamp(.9rem,2vw,1.05rem);color:var(--text-muted);max-width:520px}
.hero-carousel{border-radius:var(--radius-lg,20px);overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.12)}
.hero-carousel .carousel-item img{height:420px;object-fit:cover;width:100%}
.hero-carousel .carousel-caption{
    background:linear-gradient(transparent,rgba(0,0,0,.6));
    border-radius:0 0 20px 20px;text-align:left;
    left:0;right:0;bottom:0;padding:28px
}

/* ========== SECTIONS ========== */
.section-label{
    display:inline-block;font-size:.72rem;font-weight:700;
    letter-spacing:2px;text-transform:uppercase;
    color:var(--primary);background:var(--primary-dim);
    padding:4px 12px;border-radius:20px;margin-bottom:10px
}
.section-title{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;letter-spacing:-1px;color:var(--text)}

/* ========== CARDS ========== */
.card{
    background:var(--bg-card);border:1.5px solid var(--border);
    border-radius:var(--radius-lg,20px);color:var(--text);
    transition:.2s ease;overflow:hidden
}
.card:hover{border-color:var(--primary);box-shadow:0 8px 32px rgba(0,0,0,.08);transform:translateY(-2px)}
.card-body{padding:18px}
.card-title{color:var(--text);font-weight:700}
.card-img-top{width:100%;object-fit:cover}

/* Item cards */
.item-card .card-img-wrap{height:190px;overflow:hidden;background:var(--bg-surface,#f1f5f9);display:flex;align-items:center;justify-content:center;position:relative}
.item-card .card-img-wrap img{width:100%;height:190px;object-fit:cover;transition:transform .4s ease}
.item-card:hover .card-img-wrap>img{transform:scale(1.05)}
.card-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transition:opacity .2s ease}
.item-card:hover .card-actions,.item-card:focus-within .card-actions{opacity:1}
.action-btn{width:32px;height:32px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--border);color:var(--text);border-radius:8px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:13px;transition:.2s ease}
.action-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.action-btn.curtido,.action-btn.favoritado{background:var(--accent,#f472b6);color:#fff;border-color:var(--accent,#f472b6)}
.price-tag{font-size:1.1rem;font-weight:800;color:var(--primary)}

/* Carousel inside card */
.item-card .carousel-control-prev,.item-card .carousel-control-next{width:28px;height:28px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border-radius:50%;opacity:0;transition:opacity .2s ease;margin:0 6px}
.item-card:hover .carousel-control-prev,.item-card:hover .carousel-control-next{opacity:1}

/* ========== FORMS ========== */
.form-control,.form-select{
    background:var(--bg-card);border:1.5px solid var(--border);
    color:var(--text);border-radius:10px;
    padding:10px 14px;font-size:.9rem;
    transition:.2s ease;width:100%;
}
.form-control:focus,.form-select:focus{background:var(--bg-card);border-color:var(--primary);color:var(--text);box-shadow:0 0 0 3px var(--primary-dim)}
.form-control::placeholder{color:var(--text-muted)}
.form-label{color:var(--text-muted);font-size:.85rem;font-weight:600;margin-bottom:5px}
.form-select option{background:var(--bg-card);color:var(--text)}
.input-group .form-control{border-radius:10px 0 0 10px}
.input-group .btn{border-radius:0 10px 10px 0}

/* ========== AUTH ========== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg) 0%,var(--bg-card) 100%);padding:24px 16px}
.auth-card{width:100%;max-width:430px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 32px;box-shadow:0 16px 48px rgba(0,0,0,.08)}

/* ========== GALERIA ========== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.gallery-item{aspect-ratio:1;overflow:hidden;border-radius:var(--radius,12px);background:var(--bg-surface,#f1f5f9);cursor:pointer;position:relative;border:1px solid var(--border)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item .overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;}
.gallery-item:hover .overlay{opacity:1}

/* ========== FILTERS ========== */
.filters-bar{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius,12px);
    padding:12px 16px;margin-bottom:24px;
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.filters-bar .form-control,.filters-bar .form-select{max-width:220px}

/* ========== PAGE HEADER ========== */
.page-header{padding:40px 0 30px;border-bottom:1px solid var(--border);margin-bottom:36px;background:linear-gradient(135deg,var(--bg) 0%,var(--bg-card) 100%)}
.page-header h1{font-size:clamp(1.6rem,4vw,2.2rem);letter-spacing:-1px;color:var(--text)}

/* ========== PAGINATION ========== */
.pagination .page-link{background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);border-radius:8px!important;margin:0 2px;font-size:.88rem;transition:.2s ease}
.pagination .page-link:hover,.pagination .page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:#fff}

/* ========== ALERTS ========== */
.alert{border-radius:10px;font-size:.9rem}
.alert-success{background:rgba(16,185,129,.1);color:#065f46;border:1px solid rgba(16,185,129,.3)}
.alert-danger{background:rgba(239,68,68,.1);color:#991b1b;border:1px solid rgba(239,68,68,.3)}
.alert-info{background:var(--primary-dim);color:var(--primary);border:1px solid var(--primary-dim)}
.alert-warning{background:rgba(245,158,11,.1);color:#92400e;border:1px solid rgba(245,158,11,.3)}

/* ========== BADGES ========== */
.badge{border-radius:6px;font-size:.72rem;font-weight:600;padding:4px 9px}
.bg-warning{color:#000!important}

/* ========== UPLOAD PREVIEW ========== */
.upload-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.upload-preview-grid .prev-item{aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;border:2px solid var(--border)}
.upload-preview-grid img{width:100%;height:100%;object-fit:cover}
.upload-preview-grid .rm-btn{position:absolute;top:3px;right:3px;background:rgba(239,68,68,.9);color:#fff;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer}

/* ========== FOOTER ========== */
.site-footer{background:var(--bg-card);border-top:1px solid var(--border);padding:50px 0 24px;margin-top:60px}
.footer-brand{font-size:1.2rem;font-weight:800;color:var(--primary)}
.footer-heading{font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:14px}
.footer-links{list-style:none;padding:0}
.footer-links li{margin-bottom:8px}
.footer-links a{color:var(--text-muted);text-decoration:none;font-size:.88rem;transition:color .2s ease}
.footer-links a:hover{color:var(--primary)}
.footer-hr{border-color:var(--border);margin:32px 0 18px}

/* ========== MISC ========== */
.main-content{min-height:70vh}
.stat-item{padding:16px;text-align:center}
.stat-number{font-size:2rem;font-weight:800;color:var(--text)}

/* ========== ANIMATIONS ========== */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .5s ease both}
.fade-up-1{animation-delay:.1s}.fade-up-2{animation-delay:.2s}.fade-up-3{animation-delay:.3s}

/* ========== PAGE BANNER ========== */
.page-banner{position:relative;overflow:hidden;min-height:160px;display:flex;align-items:flex-end;background:linear-gradient(135deg,var(--bg) 0%,var(--bg-card) 100%)}
.page-banner img.banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.page-banner .banner-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 60%,transparent 100%)}
.page-banner .banner-content{position:relative;z-index:2;padding:36px 0 28px;width:100%}
.page-banner.has-image .banner-content h1,.page-banner.has-image .banner-content p{color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.page-banner.has-image .section-label{background:rgba(255,255,255,.2);color:#fff}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* ---- LG: 992px ---- */
/* --- ≤ 1200px --- */
@media(max-width:1200px){
    .nav-link{padding:6px 8px!important;font-size:.8rem}
    .search-mini .form-control{width:110px}
    .navbar-brand{font-size:1.15rem}
}

@media(max-width:992px){
    /* Navbar: esconder links no meio, mostrar hamburger */
    .navbar-collapse{display:none!important}
    .navbar-toggler{display:flex}
    .search-mini .form-control{width:120px}

    /* Hero */
    .hero{padding:50px 0 40px}
    .hero-carousel .carousel-item img{height:300px}

    /* Grid */
    .filters-bar .form-control,.filters-bar .form-select{max-width:180px}
}

/* ---- MD: 768px ---- */
@media(max-width:768px){
    body{font-size:14px}

    /* Navbar */
    #mainNav{padding:6px 0}
    .navbar-brand{font-size:1.1rem}
    .search-mini{display:none} /* esconder search na navbar, usar busca interna */

    /* Hero */
    .hero{padding:36px 0 32px}
    .hero::before{display:none}
    .hero-title{letter-spacing:-.5px}
    .hero-carousel .carousel-item img{height:240px}

    /* Auth */
    .auth-card{padding:24px 18px}
    .auth-wrap{padding:16px}

    /* Footer */
    .site-footer{padding:36px 0 20px;margin-top:40px}

    /* Gallery */
    .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}

    /* Page header */
    .page-header{padding:28px 0 22px;margin-bottom:24px}

    /* Cards */
    .card-body{padding:14px}
    .item-card .card-img-wrap,.item-card .card-img-wrap img{height:170px}

    /* Filters */
    .filters-bar{padding:10px 12px;gap:6px}
    .filters-bar .form-control,.filters-bar .form-select{max-width:100%;flex:1 1 140px}

    /* Banner */
    .page-banner{min-height:120px}
    .page-banner .banner-content{padding:24px 0 20px}

    /* Section */
    .section-title{letter-spacing:-.5px}

    /* Dropdowns: evitar sair da tela */
    .dropdown-menu-end{right:0!important;left:auto!important}
    .notif-dropdown{min-width:260px;max-width:calc(100vw - 24px)}
}

/* ---- SM: 576px ---- */
@media(max-width:576px){
    /* Navbar */
    .btn-user{font-size:.75rem;padding:5px 9px;gap:4px}
    .btn-user .bi-person-circle{display:none} /* só nome no mobile pequeno */

    /* Hero */
    .hero{padding:28px 0 24px}
    .hero .row{gap:20px!important}
    .hero-carousel .carousel-item img{height:200px}

    /* Galeria */
    .gallery-grid{grid-template-columns:repeat(3,1fr);gap:6px}

    /* Cards */
    .item-card .card-img-wrap,.item-card .card-img-wrap img{height:150px}
    .price-tag{font-size:.95rem}

    /* Auth */
    .auth-card{padding:20px 14px;border-radius:16px}

    /* Upload preview */
    .upload-preview-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}

    /* Footer colunas */
    .site-footer .col-lg-2,.site-footer .col-6{margin-bottom:20px}

    /* Pagination */
    .pagination .page-link{padding:5px 9px;font-size:.8rem}

    /* Page banner */
    .page-banner{min-height:100px}
}

/* ---- XS: 400px ---- */
@media(max-width:400px){
    .navbar-brand{font-size:1rem}
    .hero-title{font-size:1.6rem}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .auth-card{padding:18px 12px}
    .btn-accent,.btn-outline-accent{font-size:.85rem;padding:8px 14px}
}

/* ========== TOUCH DEVICES ========== */
@media(hover:none){
    .card-actions{opacity:1} /* sempre visível no touch */
    .item-card:hover .card-img-wrap>img{transform:none}
    .item-card .carousel-control-prev,
    .item-card .carousel-control-next{opacity:.7}
}    /* Reduzir gaps no mobile */
    .gy-5{--bs-gutter-y:24px!important}
    .gy-4{--bs-gutter-y:16px!important}
    

/* ========== STICKY SIDEBAR ========== */
/* Evita que sidebars fiquem por cima do conteúdo */
.sticky-sidebar {
    position: sticky;
    top: calc(var(--navbar-h, 64px) + 16px);
    z-index: 10;
}