/* CityBoard unified button system — v4.2.172 */

:root {
  --cb-btn-primary-bg: var(--cb-blue, #0b82ff);
  --cb-btn-primary-hover-bg: #006fe6;
  --cb-btn-primary-active-bg: #005ed4;
  --cb-btn-primary-text: #fff;
  --cb-btn-primary-shadow: 0 10px 22px rgba(11, 130, 255, 0.22);

  --cb-btn-secondary-bg: #fff;
  --cb-btn-secondary-text: #0f172a;
  --cb-btn-secondary-border: #dbe3ef;
  --cb-btn-secondary-hover-bg: #f8fafc;

  --cb-btn-ghost-bg: #fff;
  --cb-btn-ghost-text: #0f172a;
  --cb-btn-ghost-border: #dbe3ef;
  --cb-btn-ghost-hover-bg: #f8fafc;

  --cb-btn-danger-bg: #ef4444;
  --cb-btn-danger-hover-bg: #dc2626;
  --cb-btn-danger-active-bg: #b91c1c;
  --cb-btn-danger-text: #fff;

  --cb-btn-success-bg: #16a34a;
  --cb-btn-success-hover-bg: #15803d;
  --cb-btn-success-text: #fff;

  --cb-btn-disabled-bg: #e2e8f0;
  --cb-btn-disabled-text: #64748b;
  --cb-btn-disabled-border: #cbd5e1;

  --cb-btn-radius-sm: 10px;
  --cb-btn-radius-md: 12px;
  --cb-btn-radius-lg: 12px;

  --cb-btn-height-sm: 36px;
  --cb-btn-height-md: 42px;
  --cb-btn-height-lg: 48px;

  --cb-btn-padding-sm: 0 12px;
  --cb-btn-padding-md: 0 16px;
  --cb-btn-padding-lg: 0 20px;

  --cb-btn-font-sm: 13px;
  --cb-btn-font-md: 14px;
  --cb-btn-font-lg: 15px;

  --cb-btn-weight: 700;
  --cb-btn-border-width: 1px;
  --cb-btn-focus-ring: #93c5fd;
}

/* ── Base ── */
.cb-btn,
.cb101-btn,
.cb-cab-btn,
button.cb-btn,
a.cb-btn,
button.cb101-btn,
a.cb101-btn,
button.cb-cab-btn,
a.cb-cab-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cb-btn-height-md);
  height: var(--cb-btn-height-md);
  padding: var(--cb-btn-padding-md);
  border: var(--cb-btn-border-width) solid var(--cb-btn-secondary-border);
  border-radius: var(--cb-btn-radius-md);
  background: var(--cb-btn-secondary-bg);
  color: var(--cb-btn-secondary-text);
  font-family: inherit;
  font-size: var(--cb-btn-font-md);
  font-weight: var(--cb-btn-weight);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cb-btn span,
.cb101-btn span,
.cb-cab-btn span,
.cb-btn svg,
.cb101-btn svg,
.cb-cab-btn svg {
  color: inherit;
  fill: currentColor;
}

/* ── Sizes ── */
.cb-btn--sm,
.cb101-btn--sm,
.cb-cab-btn--sm {
  min-height: var(--cb-btn-height-sm);
  height: var(--cb-btn-height-sm);
  padding: var(--cb-btn-padding-sm);
  border-radius: var(--cb-btn-radius-sm);
  font-size: var(--cb-btn-font-sm);
}

.cb-btn--md,
.cb101-btn--md,
.cb-cab-btn--md {
  min-height: var(--cb-btn-height-md);
  height: var(--cb-btn-height-md);
  padding: var(--cb-btn-padding-md);
  border-radius: var(--cb-btn-radius-md);
  font-size: var(--cb-btn-font-md);
}

.cb-btn--lg,
.cb101-btn--lg,
.cb-cab-btn--lg {
  min-height: var(--cb-btn-height-lg);
  height: var(--cb-btn-height-lg);
  padding: var(--cb-btn-padding-lg);
  border-radius: var(--cb-btn-radius-lg);
  font-size: var(--cb-btn-font-lg);
}

.cb-btn--xs {
  min-height: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

.cb-btn--wide {
  width: 100%;
}

/* ── Primary (alias: --blue) ── */
.cb-btn--primary,
.cb101-btn--primary,
.cb-cab-btn--primary,
.cb-btn.cb-btn--blue,
a.cb-btn--primary,
a.cb101-btn--primary,
a.cb-cab-btn--primary,
a.cb-btn.cb-btn--blue {
  background: var(--cb-btn-primary-bg);
  border-color: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-text);
  box-shadow: var(--cb-btn-primary-shadow);
}

.cb-btn--primary:hover,
.cb101-btn--primary:hover,
.cb-cab-btn--primary:hover,
.cb-btn.cb-btn--blue:hover,
a.cb-btn--primary:hover,
a.cb101-btn--primary:hover,
a.cb-cab-btn--primary:hover,
a.cb-btn.cb-btn--blue:hover,
a.cb-btn--primary:visited,
a.cb101-btn--primary:visited,
a.cb-cab-btn--primary:visited,
a.cb-btn.cb-btn--blue:visited {
  background: var(--cb-btn-primary-hover-bg);
  border-color: var(--cb-btn-primary-hover-bg);
  color: var(--cb-btn-primary-text);
}

.cb-btn--primary:active,
.cb101-btn--primary:active,
.cb-cab-btn--primary:active,
.cb-btn.cb-btn--blue:active {
  background: var(--cb-btn-primary-active-bg);
  border-color: var(--cb-btn-primary-active-bg);
}

/* ── Secondary ── */
.cb-btn--secondary,
a.cb-btn--secondary {
  background: var(--cb-btn-secondary-bg);
  border-color: var(--cb-btn-secondary-border);
  color: var(--cb-btn-secondary-text);
  box-shadow: none;
}

.cb-btn--secondary:hover,
a.cb-btn--secondary:hover {
  background: var(--cb-btn-secondary-hover-bg);
  border-color: var(--cb-btn-secondary-border);
  color: var(--cb-btn-secondary-text);
}

/* ── Ghost ── */
.cb-btn--ghost,
a.cb-btn--ghost {
  background: var(--cb-btn-ghost-bg);
  border-color: var(--cb-btn-ghost-border);
  color: var(--cb-btn-ghost-text);
  box-shadow: none;
}

.cb-btn--ghost:hover,
a.cb-btn--ghost:hover {
  background: var(--cb-btn-ghost-hover-bg);
  border-color: var(--cb-btn-ghost-border);
  color: var(--cb-btn-ghost-text);
}

/* ── Danger ── */
.cb-btn--danger,
a.cb-btn--danger {
  background: var(--cb-btn-danger-bg);
  border-color: var(--cb-btn-danger-bg);
  color: var(--cb-btn-danger-text);
  box-shadow: none;
}

.cb-btn--danger:hover,
a.cb-btn--danger:hover {
  background: var(--cb-btn-danger-hover-bg);
  border-color: var(--cb-btn-danger-hover-bg);
  color: var(--cb-btn-danger-text);
}

.cb-btn--danger:active,
a.cb-btn--danger:active {
  background: var(--cb-btn-danger-active-bg);
  border-color: var(--cb-btn-danger-active-bg);
}

.cb-btn--danger-outline,
a.cb-btn--danger-outline,
button.cb-btn--danger-outline {
  background: #fff;
  border-color: #fecaca;
  color: #dc2626;
  box-shadow: none;
}

.cb-btn--danger-outline:hover,
a.cb-btn--danger-outline:hover,
button.cb-btn--danger-outline:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* ── Success (legacy --green) ── */
.cb-btn--green,
a.cb-btn--green {
  background: var(--cb-btn-success-bg);
  border-color: var(--cb-btn-success-bg);
  color: var(--cb-btn-success-text);
  box-shadow: none;
}

.cb-btn--green:hover,
a.cb-btn--green:hover {
  background: var(--cb-btn-success-hover-bg);
  border-color: var(--cb-btn-success-hover-bg);
  color: var(--cb-btn-success-text);
}

/* ── Toggle active (segmented control) ── */
.cb-btn--active,
.cb-btn.is-active {
  background: var(--cb-btn-primary-bg);
  border-color: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-text);
  box-shadow: none;
}

.cb-btn--active:hover,
.cb-btn.is-active:hover {
  background: var(--cb-btn-primary-hover-bg);
  border-color: var(--cb-btn-primary-hover-bg);
  color: var(--cb-btn-primary-text);
}

/* ── Button group (view toggles) ── */
.cb-btn-group {
  display: inline-flex;
  align-items: stretch;
  border: var(--cb-btn-border-width) solid var(--cb-btn-secondary-border);
  border-radius: var(--cb-btn-radius-md);
  overflow: hidden;
  background: var(--cb-btn-secondary-bg);
}

.cb-btn-group--sm {
  border-radius: var(--cb-btn-radius-sm);
}

.cb-btn-group .cb-btn,
.cb-btn-group a.cb-btn {
  border: 0;
  border-radius: 0;
  border-right: var(--cb-btn-border-width) solid var(--cb-btn-secondary-border);
  box-shadow: none;
  min-height: var(--cb-btn-height-md);
  height: var(--cb-btn-height-md);
}

.cb-btn-group--sm .cb-btn,
.cb-btn-group--sm a.cb-btn {
  min-height: var(--cb-btn-height-sm);
  height: var(--cb-btn-height-sm);
}

.cb-btn-group .cb-btn:last-child,
.cb-btn-group a.cb-btn:last-child {
  border-right: 0;
}

.cb-btn-group .cb-btn:not(.cb-btn--active):not(.is-active):hover,
.cb-btn-group a.cb-btn:not(.cb-btn--active):not(.is-active):hover {
  background: #eff6ff;
  color: #075ec9;
}

.cb-btn-group .cb-btn.cb-btn--active,
.cb-btn-group .cb-btn.is-active,
.cb-btn-group a.cb-btn.cb-btn--active {
  background: var(--cb-btn-primary-bg);
  border-color: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-text);
}

.cb-btn-group .cb-btn.cb-btn--active:hover,
.cb-btn-group .cb-btn.is-active:hover {
  background: var(--cb-btn-primary-hover-bg);
  border-color: var(--cb-btn-primary-hover-bg);
  color: var(--cb-btn-primary-text);
}

/* Legacy view bars map to button group tokens */
.cb-listing-view-bar,
.cb-listing-view-toggle {
  display: inline-flex;
  align-items: stretch;
  border: var(--cb-btn-border-width) solid var(--cb-btn-secondary-border);
  border-radius: var(--cb-btn-radius-md);
  overflow: hidden;
  background: var(--cb-btn-secondary-bg);
}

.cb-listing-view-bar__item,
.cb-listing-view-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cb-btn-height-md);
  height: var(--cb-btn-height-md);
  padding: var(--cb-btn-padding-sm);
  border: 0;
  border-right: var(--cb-btn-border-width) solid var(--cb-btn-secondary-border);
  border-radius: 0;
  background: var(--cb-btn-secondary-bg);
  color: var(--cb-btn-secondary-text);
  font: inherit;
  font-size: var(--cb-btn-font-sm);
  font-weight: var(--cb-btn-weight);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cb-listing-view-bar__item:last-child,
.cb-listing-view-toggle button:last-child {
  border-right: 0;
}

.cb-listing-view-bar__item.is-active,
.cb-listing-view-bar__item.cb-btn--active,
.cb-listing-view-toggle button.is-active,
.cb-listing-view-toggle button.cb-btn--active {
  background: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-text);
}

.cb-listing-view-bar__item:not(.is-active):not(.cb-btn--active):hover,
.cb-listing-view-toggle button:not(.is-active):not(.cb-btn--active):hover {
  background: #eff6ff;
  color: #075ec9;
}

/* ── Disabled ── */
.cb-btn:disabled,
.cb101-btn:disabled,
.cb-cab-btn:disabled,
.cb-btn[aria-disabled="true"],
.cb101-btn[aria-disabled="true"],
.cb-cab-btn[aria-disabled="true"],
button.cb-cab-btn:disabled,
a.cb-cab-btn[aria-disabled="true"] {
  background: var(--cb-btn-disabled-bg);
  border-color: var(--cb-btn-disabled-border);
  color: var(--cb-btn-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
}

.cb-btn:disabled:hover,
.cb101-btn:disabled:hover,
.cb-cab-btn:disabled:hover,
.cb-btn[aria-disabled="true"]:hover,
.cb101-btn[aria-disabled="true"]:hover,
.cb-cab-btn[aria-disabled="true"]:hover {
  background: var(--cb-btn-disabled-bg);
  color: var(--cb-btn-disabled-text);
}

.cb-btn--primary:disabled,
.cb-btn--primary[aria-disabled="true"],
.cb-btn.cb-btn--blue:disabled,
.cb-btn.cb-btn--blue[aria-disabled="true"],
.cb-cab-btn--primary:disabled,
.cb-cab-btn--primary[aria-disabled="true"],
.cb101-btn--primary:disabled,
.cb101-btn--primary[aria-disabled="true"] {
  background: var(--cb-btn-disabled-bg);
  border-color: var(--cb-btn-disabled-border);
  color: var(--cb-btn-disabled-text);
  box-shadow: none;
}

/* ── Loading ── */
.cb-cab-btn.is-loading,
.cb101-btn.is-loading,
.cb-btn.is-loading {
  opacity: 0.85;
  pointer-events: none;
  position: relative;
}

.cb-btn.is-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cb-btn-spin 0.65s linear infinite;
}

@keyframes cb-btn-spin {
  to { transform: rotate(360deg); }
}

/* ── Focus ── */
.cb-cab-btn:focus-visible,
.cb101-btn:focus-visible,
.cb-btn:focus-visible,
.cb-listing-view-bar__item:focus-visible,
.cb-listing-view-toggle button:focus-visible,
.cb-select:focus-visible {
  outline: 2px solid var(--cb-btn-focus-ring);
  outline-offset: 2px;
}

/* ── Select / dropdown control (toolbar sort) ── */
.cb-select,
.cb-listing-sort select,
.cb-products-sort select,
select.cb-select {
  box-sizing: border-box;
  min-height: var(--cb-btn-height-md);
  height: var(--cb-btn-height-md);
  padding: 0 36px 0 14px;
  border: var(--cb-btn-border-width) solid var(--cb-btn-secondary-border);
  border-radius: var(--cb-btn-radius-md);
  background: var(--cb-btn-secondary-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--cb-btn-secondary-text);
  font: inherit;
  font-size: var(--cb-btn-font-sm);
  font-weight: var(--cb-btn-weight);
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cb-select:hover,
.cb-listing-sort select:hover,
.cb-products-sort select:hover {
  border-color: #c7d5e8;
}

.cb-select--sm,
.cb-listing-sort .cb-select--sm {
  min-height: var(--cb-btn-height-sm);
  height: var(--cb-btn-height-sm);
  font-size: var(--cb-btn-font-sm);
  border-radius: var(--cb-btn-radius-sm);
}

.cb-select option,
.cb-listing-sort select option,
.cb-products-sort select option {
  color: var(--cb-btn-secondary-text);
  background: #fff;
  font-weight: 500;
}

/* ── Cabinet link color overrides ── */
.cb-cab a.cb-cab-btn--primary,
.cb-cab button.cb-cab-btn--primary,
.cb-cab a.cb-cab-btn--primary:visited,
.cb-cab a.cb-cab-btn--primary:hover,
.cb-cab a.cb-cab-btn--primary:focus-visible {
  color: var(--cb-btn-primary-text);
}

.cb-cab a.cb-cab-btn:not(.cb-cab-btn--primary):not(.cb-cab-btn--link):not(:disabled):not([aria-disabled="true"]),
.cb-cab a.cb-cab-btn:not(.cb-cab-btn--primary):not(.cb-cab-btn--link):not(:disabled):not([aria-disabled="true"]):visited {
  color: var(--cb-btn-secondary-text);
}

/* Search submit buttons in catalog toolbars */
.cb-listing-search .cb-btn--primary,
.cb-listing-search .cb-btn--blue,
.cb-products-search .cb-btn--primary,
.cb-products-search .cb-btn--blue,
.cb-searchbar .cb-btn--primary,
.cb-searchbar .cb-btn--blue,
.cb-city-search .cb-btn--primary,
.cb-city-search .cb-btn--blue,
.cb-filterbar .cb-btn--primary,
.cb-filterbar .cb-btn--blue,
form[method="get"] button.cb-btn--primary,
form[method="get"] button.cb-btn--blue,
button[type="submit"].cb-btn--primary,
button[type="submit"].cb-btn--blue {
  min-width: 86px;
  min-height: var(--cb-btn-height-md);
  height: var(--cb-btn-height-md);
}

@media (max-width: 760px) {
  .cb-btn,
  .cb101-btn,
  .cb-cab-btn {
    min-height: 38px;
    height: 38px;
    padding: 0 14px;
  }

  .cb-listing-search .cb-btn--primary,
  .cb-listing-search .cb-btn--blue {
    min-height: 38px;
    height: 38px;
  }
}

/* ── Legacy black active states → brand blue ── */
.cb-cabinet-tabs a.active {
  background: var(--cb-btn-primary-bg);
  border-color: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-text);
}

.cb-smart-pill.is-active,
.cb-smart-choice.is-active {
  background: var(--cb-btn-primary-bg);
  border-color: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-text);
  box-shadow: none;
}