/* BWClients Catalog — /catalog/ */
:root {
    --cat-accent: #00d4aa;
    --cat-accent-hover: #00b894;
    --cat-text: #1a1a2e;
    --cat-text-secondary: #636e7b;
    --cat-text-muted: #a0aab4;
    --cat-bg: #fff;
    --cat-bg-alt: #f8f9fa;
    --cat-border: #eee;
    --cat-radius: 12px;
}

/* Hero */
.cat-hero {
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
    color: #fff;
    padding: 48px 0 40px;
    text-align: center;
}
.cat-hero__title { font-size: 1.75rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.cat-hero__sub { font-size: 1rem; color: rgba(255,255,255,.6); margin-bottom: 24px; }

.cat-search { position: relative; max-width: 540px; margin: 0 auto; display: flex; gap: 0; }
.cat-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cat-text-muted); pointer-events: none; z-index: 1; }
.cat-search__input { flex: 1; padding: 14px 14px 14px 44px; border: none; border-radius: var(--cat-radius) 0 0 var(--cat-radius); font-size: 16px; outline: none; background: #fff; color: var(--cat-text); -webkit-appearance: none; font-family: inherit; }
.cat-search__input::placeholder { color: var(--cat-text-muted); }
.cat-search__clear { position: absolute; right: 100px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--cat-text-muted); font-size: 18px; cursor: pointer; text-decoration: none; z-index: 1; }
.cat-search__btn { padding: 14px 24px; background: var(--cat-accent); color: #0a0a0f; border: none; border-radius: 0 var(--cat-radius) var(--cat-radius) 0; font-weight: 600; font-size: .9375rem; cursor: pointer; font-family: inherit; white-space: nowrap; }
.cat-search__btn:hover { background: var(--cat-accent-hover); }

/* Container */
.cat-main { min-height: 100vh; }
.cat-container { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* Tabs */
.cat-tabs { display: flex; gap: 4px; background: var(--cat-bg-alt); border-radius: 10px; padding: 3px; margin: 20px 0 16px; }
.cat-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 8px; font-size: .875rem; font-weight: 500; color: var(--cat-text-secondary); text-decoration: none; transition: all .15s; }
.cat-tab:hover { color: var(--cat-text); }
.cat-tab--active { background: #fff; color: var(--cat-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Filters */
.cat-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; background: var(--cat-bg-alt); border: 1px solid var(--cat-border); border-radius: 100px; font-size: .8125rem; color: var(--cat-text-secondary); text-decoration: none; transition: all .15s; white-space: nowrap; }
.cat-chip:hover { border-color: var(--cat-accent); color: var(--cat-accent); }
.cat-chip--active { background: var(--cat-accent); border-color: var(--cat-accent); color: #0a0a0f; font-weight: 500; }
.cat-chip--clear { background: none; border-color: transparent; color: var(--cat-text-muted); font-size: .75rem; }
.cat-chip__count { font-size: .6875rem; opacity: .6; }

/* Count */
.cat-count { font-size: .8125rem; color: var(--cat-text-muted); margin-bottom: 12px; }

/* View toggle */
.cat-view-toggle { display: flex; gap: 4px; margin-bottom: 12px; background: var(--cat-bg-alt); border-radius: 10px; padding: 3px; max-width: 240px; }
.cat-view-btn { flex: 1; padding: 8px 16px; border: none; background: none; border-radius: 8px; font-size: .8125rem; font-weight: 500; cursor: pointer; transition: all .15s; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--cat-text-secondary); }
.cat-view-btn.active { background: #fff; color: var(--cat-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Map */
.cat-map { height: 450px; border-radius: var(--cat-radius); overflow: hidden; border: 1px solid var(--cat-border); margin-bottom: 16px; }

/* Grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 24px; }

/* Card */
.cat-card { display: block; padding: 16px; border: 1px solid var(--cat-border); border-radius: var(--cat-radius); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.cat-card:hover { border-color: var(--cat-accent); box-shadow: 0 2px 12px rgba(0,212,170,.1); }

.cat-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cat-card__logo { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.cat-card__logo--ph { display: flex; align-items: center; justify-content: center; background: var(--cat-accent); color: #0a0a0f; font-weight: 700; font-size: 1.125rem; }
.cat-card__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cat-card__avatar--ph { display: flex; align-items: center; justify-content: center; background: var(--cat-accent); color: #0a0a0f; font-weight: 700; font-size: 1.25rem; }
.cat-card__name { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.cat-card__position { font-size: .8125rem; color: var(--cat-text-secondary); }
.cat-card__rating { font-size: .8125rem; color: var(--cat-text-secondary); margin-top: 2px; }
.cat-card__reviews { color: var(--cat-text-muted); }
.cat-star { color: #f59e0b; }
.cat-card__addr { font-size: .8125rem; color: var(--cat-text-secondary); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--cat-text-muted); }

/* Empty */
.cat-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--cat-text-secondary); }
.cat-empty svg { margin-bottom: 12px; }
.cat-empty p { font-size: .9375rem; margin-bottom: 8px; }
.cat-empty a { color: var(--cat-accent); text-decoration: none; font-size: .875rem; }

/* Pagination */
.cat-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 0 32px; }
.cat-page-btn { padding: 8px 16px; font-size: .8125rem; color: var(--cat-text-secondary); text-decoration: none; border: 1px solid var(--cat-border); border-radius: 8px; }
.cat-page-btn:hover { border-color: var(--cat-accent); color: var(--cat-accent); }
.cat-page-num { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: .875rem; color: var(--cat-text-secondary); text-decoration: none; border-radius: 8px; }
.cat-page-num:hover { background: var(--cat-bg-alt); }
.cat-page-num--active { background: var(--cat-accent); color: #0a0a0f; font-weight: 600; }

/* Responsive — tablet */
@media (max-width: 768px) {
    .cat-hero { padding: 32px 0 28px; }
    .cat-hero__title { font-size: 1.375rem; }
    .cat-grid { grid-template-columns: 1fr; }
    .cat-map { height: 300px; }
}

/* Responsive — mobile */
@media (max-width: 480px) {
    .cat-hero { padding: 24px 16px 20px; }
    .cat-hero__title { font-size: 1.125rem; }
    .cat-hero__sub { font-size: .8125rem; margin-bottom: 16px; }

    /* Search: stack button below or shrink */
    .cat-search { max-width: 100%; }
    .cat-search__input { padding: 12px 12px 12px 40px; font-size: 16px; border-radius: var(--cat-radius) 0 0 var(--cat-radius); }
    .cat-search__btn { padding: 12px 14px; font-size: .8125rem; }
    .cat-search__clear { right: 80px; }

    /* Tabs — full width, tighter */
    .cat-tabs { margin: 16px 0 12px; }
    .cat-tab { padding: 10px 12px; font-size: .8125rem; }

    /* Filters — horizontal scroll */
    .cat-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
    .cat-filters::-webkit-scrollbar { display: none; }
    .cat-chip { flex-shrink: 0; min-height: 36px; }

    /* Cards */
    .cat-card { padding: 12px; }
    .cat-card__header { gap: 10px; }
    .cat-card__logo, .cat-card__logo--ph { width: 40px; height: 40px; border-radius: 8px; font-size: 1rem; }
    .cat-card__avatar, .cat-card__avatar--ph { width: 48px; height: 48px; font-size: 1.125rem; }
    .cat-card__name { font-size: .875rem; }
    .cat-card__addr { font-size: .75rem; }

    /* Map */
    .cat-map { height: 250px; border-radius: 8px; }

    /* Pagination — larger touch targets */
    .cat-page-btn { padding: 10px 16px; min-height: 44px; }
    .cat-page-num { width: 44px; height: 44px; }

    /* View toggle */
    .cat-view-toggle { max-width: 100%; }
    .cat-view-btn { padding: 8px 12px; }
}

/* Responsive — small phones */
@media (max-width: 374px) {
    .cat-hero { padding: 20px 12px 16px; }
    .cat-hero__title { font-size: 1rem; }
    .cat-search__input { padding: 10px 10px 10px 36px; }
    .cat-search__btn { padding: 10px 12px; font-size: .75rem; }
    .cat-card__logo, .cat-card__logo--ph { width: 36px; height: 36px; }
    .cat-card__avatar, .cat-card__avatar--ph { width: 44px; height: 44px; }
}