/*
 * Buffalo147 AI — model catalogue
 *
 * The tab bar, sort chips and card grid from the reference design. Colours
 * come from the design tokens; each card carries its vendor colour through a
 * --card-accent custom property set inline, so a new model brings its own
 * identity without a stylesheet change.
 */

/* ---------------------------------------------------------------------
 * Site header
 * ------------------------------------------------------------------ */

.bf-header {
  position: sticky;
  top: 0;
  z-index: var(--bf-z-header);
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: var(--bf-blur);
  -webkit-backdrop-filter: var(--bf-blur);
  border-bottom: 1px solid var(--bf-line);
}

.bf-header__inner {
  max-width: var(--bf-container);
  margin-inline: auto;
  padding: 0 var(--bf-space-5);
  height: var(--bf-header-h);
  display: flex;
  align-items: center;
  gap: var(--bf-space-6);
}

.bf-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--bf-text);
  font-weight: 700;
  font-size: var(--bf-size-md);
  flex: none;
}
.bf-header__brand:hover { color: var(--bf-text); }

.bf-header__nav {
  display: none;
  align-items: center;
  gap: var(--bf-space-5);
  flex: 1;
}
.bf-header__nav a {
  color: var(--bf-text-muted);
  font-size: var(--bf-size-base);
  font-weight: 500;
}
.bf-header__nav a:hover { color: var(--bf-text); }

@media (min-width: 820px) {
  .bf-header__nav { display: flex; }
}

.bf-header__actions {
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  margin-inline-start: auto;
}

.bf-header__link { color: var(--bf-text-muted); font-size: var(--bf-size-base); }
.bf-header__link:hover { color: var(--bf-text); }

.bf-btn--sm { padding: 9px 18px; font-size: var(--bf-size-base); }

.bf-credit-chip {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--bf-accent-line);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  color: var(--bf-accent);
  font-size: var(--bf-size-sm);
  font-weight: 500;
  white-space: nowrap;
}
.bf-credit-chip__label { color: var(--bf-text-muted); }

@media (min-width: 560px) {
  .bf-credit-chip { display: inline-flex; }
}

/* ---------------------------------------------------------------------
 * Page frame
 * ------------------------------------------------------------------ */

.bf-models,
.bf-model {
  max-width: var(--bf-container);
  margin-inline: auto;
  padding: var(--bf-space-10) var(--bf-space-5) var(--bf-space-16);
}

.bf-models__intro { text-align: center; margin-bottom: var(--bf-space-8); }
.bf-models__intro h1 { font-size: var(--bf-size-3xl); margin-bottom: var(--bf-space-3); }
.bf-models__intro p { color: var(--bf-text-muted); max-width: 560px; margin-inline: auto; }

/* ---------------------------------------------------------------------
 * Category tabs
 *
 * One rounded rail holding every tab, with the active one lit in its own
 * category colour. Horizontally scrollable on narrow screens rather than
 * wrapping, so the rail keeps its shape.
 * ------------------------------------------------------------------ */

.bf-tabs {
  display: flex;
  align-items: center;
  gap: var(--bf-space-1);
  padding: 7px;
  margin-bottom: var(--bf-space-6);
  border: 1px solid var(--bf-glass-border);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-glass);
  backdrop-filter: var(--bf-blur);
  -webkit-backdrop-filter: var(--bf-blur);
  overflow-x: auto;
  scrollbar-width: none;
}
.bf-tabs::-webkit-scrollbar { display: none; }

.bf-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--bf-radius-pill);
  background: none;
  color: var(--bf-text-muted);
  font-family: inherit;
  font-size: var(--bf-size-md);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--bf-fast) var(--bf-ease),
              background var(--bf-fast) var(--bf-ease),
              border-color var(--bf-fast) var(--bf-ease),
              box-shadow var(--bf-normal) var(--bf-ease);
}

.bf-tab:hover { color: var(--bf-text); background: var(--bf-glass-strong); }

.bf-tab.is-active {
  color: var(--tab-accent, var(--bf-accent));
  border-color: color-mix(in srgb, var(--tab-accent, #A94F31) 45%, transparent);
  background: color-mix(in srgb, var(--tab-accent, #A94F31) 10%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--tab-accent, #A94F31) 22%, transparent);
}

/* Three dots that animate only on the active tab — the brand's
   "thinking" motif, reused at small scale. */
.bf-tab__dots { display: none; gap: 3px; align-items: center; }
.bf-tab.is-active .bf-tab__dots { display: inline-flex; }

.bf-tab__dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: bf-dot 1.4s var(--bf-ease) infinite;
}
.bf-tab__dots i:nth-child(2) { animation-delay: .18s; }
.bf-tab__dots i:nth-child(3) { animation-delay: .36s; }

@keyframes bf-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ---------------------------------------------------------------------
 * Sort chips
 * ------------------------------------------------------------------ */

.bf-sorts {
  display: flex;
  align-items: center;
  gap: var(--bf-space-1);
  padding: 6px;
  margin: 0 0 var(--bf-space-6) auto;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--bf-glass-border);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-glass);
  overflow-x: auto;
  scrollbar-width: none;
}
.bf-sorts::-webkit-scrollbar { display: none; }

.bf-sort {
  flex: none;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--bf-radius-pill);
  background: none;
  color: var(--bf-text-dim);
  font-family: inherit;
  font-size: var(--bf-size-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--bf-fast) var(--bf-ease), background var(--bf-fast) var(--bf-ease);
}
.bf-sort:hover { color: var(--bf-text); }
.bf-sort.is-active { color: var(--bf-text); background: var(--bf-surface-3); }

/* ---------------------------------------------------------------------
 * Card grid
 * ------------------------------------------------------------------ */

.bf-models__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-space-4);
}

@media (min-width: 680px)  { .bf-models__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .bf-models__grid { grid-template-columns: repeat(3, 1fr); } }

.bf-model-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
  padding: var(--bf-space-5);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  background: var(--bf-surface);
  transition: border-color var(--bf-normal) var(--bf-ease),
              transform var(--bf-normal) var(--bf-ease-out),
              box-shadow var(--bf-normal) var(--bf-ease);
}

.bf-model-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-accent, #A94F31) 50%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-accent, #A94F31) 22%, transparent),
              0 18px 44px rgba(0, 0, 0, .5),
              0 0 60px color-mix(in srgb, var(--card-accent, #A94F31) 12%, transparent);
}

.bf-model-card.is-unavailable { opacity: .55; }
.bf-model-card.is-unavailable:hover { transform: none; }

.bf-model-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--bf-space-3);
}


.bf-model-card__title { flex: 1; min-width: 0; }
.bf-model-card__title h3 {
  margin: 0 0 2px;
  font-size: var(--bf-size-lg);
  font-weight: 700;
  line-height: 1.3;
}
.bf-model-card__title p {
  margin: 0;
  color: var(--bf-text-dim);
  font-size: var(--bf-size-sm);
}

.bf-model-card__flag {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  border: 1px solid var(--bf-accent-line);
  color: var(--bf-accent);
  font-size: var(--bf-size-xs);
  font-weight: 500;
  white-space: nowrap;
}
.bf-model-card__flag--new {
  background: var(--bf-info-soft);
  border-color: rgba(77, 163, 255, .3);
  color: var(--bf-info);
}

.bf-model-card__desc {
  margin: 0;
  color: var(--bf-text-muted);
  font-size: var(--bf-size-base);
  line-height: 1.85;
  flex: 1;
}

.bf-model-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bf-model-card__tags li {
  padding: 5px 12px;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface-2);
  color: var(--bf-text-muted);
  font-size: var(--bf-size-xs);
}

.bf-model-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  padding-top: var(--bf-space-4);
  border-top: 1px solid var(--bf-line);
}

.bf-model-card__cta {
  padding: 10px 20px;
  border: 1px solid color-mix(in srgb, var(--card-accent, #A94F31) 55%, transparent);
  border-radius: var(--bf-radius-pill);
  color: var(--card-accent, var(--bf-accent));
  font-size: var(--bf-size-base);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--bf-fast) var(--bf-ease),
              box-shadow var(--bf-normal) var(--bf-ease);
}
.bf-model-card__cta:hover {
  color: var(--card-accent, var(--bf-accent));
  background: color-mix(in srgb, var(--card-accent, #A94F31) 12%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--card-accent, #A94F31) 22%, transparent);
}
.bf-model-card__cta.is-disabled {
  border-color: var(--bf-line-strong);
  color: var(--bf-text-faint);
  cursor: not-allowed;
}
.bf-model-card__cta.is-disabled:hover { background: none; box-shadow: none; }

.bf-model-card__price {
  color: var(--bf-text-muted);
  font-size: var(--bf-size-sm);
  white-space: nowrap;
}

.bf-models__none,
.bf-models__empty {
  text-align: center;
  color: var(--bf-text-dim);
  padding-block: var(--bf-space-16);
}
.bf-models__empty svg { margin-inline: auto; margin-bottom: var(--bf-space-4); }
.bf-models__empty h2 { font-size: var(--bf-size-xl); }

/* ---------------------------------------------------------------------
 * Single model page
 * ------------------------------------------------------------------ */

.bf-crumbs {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin-bottom: var(--bf-space-6);
  color: var(--bf-text-faint);
  font-size: var(--bf-size-sm);
}
.bf-crumbs a { color: var(--bf-text-dim); }
.bf-crumbs a:hover { color: var(--bf-accent); }

.bf-model__hero {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-5);
  padding-bottom: var(--bf-space-8);
  border-bottom: 1px solid var(--bf-line);
}
@media (min-width: 700px) {
  .bf-model__hero { flex-direction: row; align-items: flex-start; gap: var(--bf-space-6); }
}

.bf-model__hero .bf-model-logo { width: 76px; height: 76px; border-radius: 20px; font-size: 24px; }

.bf-model__headline { flex: 1; min-width: 0; }
.bf-model__vendor {
  display: inline-block;
  margin-bottom: var(--bf-space-2);
  color: var(--card-accent, var(--bf-accent));
  font-size: var(--bf-size-sm);
  font-weight: 500;
}
.bf-model__headline h1 { font-size: var(--bf-size-3xl); margin-bottom: var(--bf-space-3); }
.bf-model__lead { color: var(--bf-text-muted); font-size: var(--bf-size-lg); max-width: 620px; }

.bf-model__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-3);
  margin-top: var(--bf-space-5);
}

.bf-model__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: var(--bf-space-8) 0;
  background: var(--bf-line);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius);
  overflow: hidden;
}
@media (min-width: 760px) {
  .bf-model__specs { grid-template-columns: repeat(3, 1fr); }
}

.bf-spec { background: var(--bf-surface); padding: var(--bf-space-4) var(--bf-space-5); }
.bf-spec dt { color: var(--bf-text-dim); font-size: var(--bf-size-xs); margin-bottom: 4px; }
.bf-spec dd { margin: 0; font-size: var(--bf-size-md); font-weight: 500; }

.bf-model__pricing h2,
.bf-model__related h2 { font-size: var(--bf-size-xl); margin-bottom: var(--bf-space-4); }

.bf-price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-space-3);
}
@media (min-width: 620px) {
  .bf-price-grid { grid-template-columns: repeat(3, 1fr); }
}

.bf-price {
  padding: var(--bf-space-5);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
}
.bf-price__label { display: block; color: var(--bf-text-dim); font-size: var(--bf-size-sm); }
.bf-price__value {
  display: block;
  margin: 6px 0 2px;
  font-size: var(--bf-size-2xl);
  font-weight: 700;
  color: var(--card-accent, var(--bf-accent));
}
.bf-price__unit { color: var(--bf-text-faint); font-size: var(--bf-size-xs); }

.bf-model__note {
  margin-top: var(--bf-space-4);
  padding: var(--bf-space-4) var(--bf-space-5);
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-2);
  color: var(--bf-text-muted);
  font-size: var(--bf-size-sm);
}

.bf-model__body { margin: var(--bf-space-10) 0; max-width: 760px; }
.bf-model__body h2 { font-size: var(--bf-size-xl); margin-top: var(--bf-space-8); }
.bf-model__body p { color: var(--bf-text-muted); }

.bf-model__related { margin-top: var(--bf-space-12); }

/* =====================================================================
 * Small screens
 * ================================================================== */

@media (max-width: 640px) {

  .bf-header__inner {
    gap: var(--bf-space-2);
    padding-inline: var(--bf-space-4);
  }

  /* The wordmark alone is enough once space is tight; the mark still
     identifies the site. */
  .bf-header__brand span { display: none; }

  .bf-header__actions { gap: var(--bf-space-2); }

  .bf-models,
  .bf-model {
    padding: var(--bf-space-6) var(--bf-space-4) var(--bf-space-12);
  }

  .bf-models__intro { margin-bottom: var(--bf-space-6); }
  .bf-models__intro p { font-size: var(--bf-size-base); }

  /* The rails already scroll sideways; give them edge padding so the first
     and last chips are not clipped by the screen edge. */
  .bf-tabs,
  .bf-sorts {
    margin-inline: calc(var(--bf-space-4) * -1);
    padding-inline: var(--bf-space-4);
    border-radius: 0;
    border-inline: 0;
    background: none;
  }

  .bf-tab { padding: 10px 16px; font-size: var(--bf-size-base); }
  .bf-sorts { width: auto; justify-content: flex-start; }

  /* Cards get a lighter touch: less padding, tighter type, and a footer
     that stacks when the price and the button will not sit side by side. */
  .bf-model-card { padding: var(--bf-space-4); gap: var(--bf-space-3); }
  .bf-model-card:hover { transform: none; }

  .bf-model-card__foot {
    flex-wrap: wrap;
    gap: var(--bf-space-2);
  }
  .bf-model-card__cta { flex: 1; text-align: center; }

  /* Single model page */
  .bf-model__hero .bf-model-logo { width: 56px; height: 56px; border-radius: 16px; }
  .bf-model__lead { font-size: var(--bf-size-md); }
  .bf-model__actions { flex-direction: column; }
  .bf-model__actions .bf-btn { width: 100%; }

  /* Two columns of specifications on a narrow screen leaves each value on
     three lines. One column reads better than two cramped ones. */
  .bf-model__specs { grid-template-columns: 1fr; }

  .bf-crumbs { flex-wrap: wrap; font-size: var(--bf-size-xs); }
}

/* Tablets: two card columns, but the rest already fits. */
@media (min-width: 641px) and (max-width: 1019px) {
  .bf-models__grid { grid-template-columns: repeat(2, 1fr); }
  .bf-model__specs { grid-template-columns: repeat(2, 1fr); }
}


/* =====================================================================
 * Cost band
 *
 * Three dots rather than a number: the useful question for someone
 * choosing is which of these is the cheap one, and "510 credits per
 * million tokens" answers a question nobody asked.
 *
 * The word beside it carries the same meaning, so the dots never have to
 * be read as colour alone.
 * ================================================================== */

.bf-tier {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-end: 7px;
  vertical-align: middle;
}

.bf-tier i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bf-line-strong);
}

/*
 * The cheap end of the scale, in the reading green.
 *
 * This was the status green — the one that says «ذخیره شد». Nothing
 * has happened here: it is a place on a price scale, which is read and
 * weighed rather than reacted to.
 */
.bf-tier--low i:nth-child(1)  { background: var(--bf-sage, #74AA9C); }
.bf-tier--mid i:nth-child(-n+2) { background: #B76B52; }
.bf-tier--high i               { background: #FF7A6B; }

/* The fairness note reads as a statement, not a warning. */
.bf-model__note--fair {
  border-inline-start: 2px solid var(--bf-accent);
  padding-inline-start: var(--bf-space-4);
  color: var(--bf-text-muted);
}

.bf-model__note--fair strong { color: var(--bf-text); }