/* Category pages */

/* ── Brand grid (Category/Index) ── */
/* headline + spacing */
  .btn-teal { background:#0f7f87; color:#fff; }
  .btn-teal:hover { background:#0c686e; color:#fff; }

  /* A–Z bar */
  .az-wrap { top: 64px; z-index: 1020; }
  .az-list { letter-spacing: .35em; text-transform: uppercase; }
  .az-item { font-weight: 600; font-size: 1.05rem; }
  .az-link { color:#111; text-decoration: none; padding: .15rem .18rem; }
  .az-link:hover { text-decoration: underline; }

  /* Cards */
  .brand-card { border:0; box-shadow:0 2px 10px rgba(0,0,0,.06); transition: transform .08s ease; }
  .brand-card:hover { transform: translateY(-2px); }
  .brand-img { width:100%; height:100%; object-fit:contain; padding:.75rem; }
  .brand-name { font-weight:700; letter-spacing:.02em; text-transform:uppercase; font-size:.92rem; color:#111; }

  /* Anchor offset so scrolled-to card clears the sticky bar */
  [id^="sec-"] { scroll-margin-top: 90px; }

  /* Mobile tweaks */
  @media (max-width: 576px) {
    .az-item { font-size: .95rem; }
    .brand-name { font-size: .85rem; }
    .az-wrap { top: 56px; }
  }

    #alphaBar.sticky-top {
        top: 0 !important;
        z-index: 1030; /* above main content but below header dropdowns */
        margin-top: 0 !important;
    }

/* ── Tiles landing (Category/TilesLanding) ── */
/* Container of the cards */
    .category-card {
        display: block;
        width: 220px; /* bigger, tap-friendly cards */
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    @media (min-width: 768px) {
        .category-card

    {
        width: 260px;
    }

    }

    @media (min-width: 992px) {
        .category-card

    {
        width: 280px;
    }

    }

    .category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.15);
    }

    .category-card img {
        object-fit: cover;
        border-radius: 1rem;
    }

    .card-body h5 {
        font-size: 1.1rem;
        color: #212529;
    }

/* ── Category picker & brand cards (from site.css) ── */
.category-picker {
    padding: 4px 44px; /* spațiu pentru săgeți pe mobil */
    scrollbar-width: none; /* firefox */
}

    .category-picker::-webkit-scrollbar {
        display: none;
    }

.category-btn {
    min-width: 110px;
    height: 86px;
    border: 2px solid #0d6efd;
    border-radius: 18px;
    background: #fff;
    color: #0d6efd;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    .category-btn i {
        font-size: 22px;
    }

    .category-btn span {
        font-size: 12px;
        font-weight: 600;
    }

    .category-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0,0,0,.12);
    }

.category-btn-cta {
    background: #0b1f44 !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(13,110,253,.35);
    transform: translateY(-2px);
}

    .category-btn-cta i,
    .category-btn-cta span {
        color: #fff !important;
    }

    /* Hover doar un mic extra (nu schimbă complet) */
    .category-btn-cta:hover {
        transform: translateY(-3px) scale(1.02);
        color: #fff !important;
    }
    
    .category-btn-cta i,
    .category-btn-cta span {
        color: #fff;
    }

  

.cat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.left-arrow {
    left: 6px;
}

.right-arrow {
    right: 6px;
}

.home-category-header {
    max-width: 720px;
    margin: 0 auto;
}

.home-category-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0b1f44; /* albastru închis elegant */
    margin-bottom: 6px;
}

.home-category-subtitle {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
}

@media (min-width: 768px) {
    .home-category-title {
        font-size: 1.9rem;
    }

    .home-category-subtitle {
        font-size: 1.05rem;
    }
}


.category-header {
    max-width: 720px;
    margin: 0 auto 32px auto;
}

.category-title {
    font-size: 28px; /* desktop */
    font-weight: 700;
    color: #0b2a5b;
    margin-bottom: 6px;
}

.category-subtitle {
    font-size: 16px;
    color: #6c7a92;
    line-height: 1.5;
}

/* Desktop mare */
@media (min-width: 992px) {
    .category-title {
        font-size: 32px;
    }

    .category-subtitle {
        font-size: 17px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .category-title {
        font-size: 22px;
    }

    .category-subtitle {
        font-size: 14px;
    }
}

.brand-card-all {
    background: #f7f9fc; /* aproape alb */
    border: 1.5px dashed #18427d; /* border soft */
    box-shadow: none;
    transition: all .2s ease;
}

    .brand-card-all:hover {
        background: #ffffff;
        border-color: #b9c6dc;
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0,0,0,.08);
    }

.brand-all-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: black; /* dark neutral */
    font-weight: 700;
    font-size: 25px;
}

    .brand-all-inner i {
        font-size: 50px;
        color: black; /* gri-albăstrui */
    }


.category-btn.active {
    border-color: var(--bs-primary);
    background: #0b2a5b;
}

    .category-btn.active i,
    .category-btn.active span {
        color: var(--bs-primary);
        color: white;
    }