/* KARETA.KZ r289 — button normalization guard
   Purpose: bind legacy button classes to the mandatory UI_STANDARD_KARETA.md button contract.
   This file is intentionally loaded after component CSS and does not change click logic. */

:root{
  --btn-radius: var(--ui-radius-btn, 10px);
  --btn-height-sm: var(--ui-btn-h-sm, 36px);
  --btn-height-md: var(--ui-btn-h-md, 44px);
  --btn-height-lg: var(--ui-btn-h-lg, 48px);
  --btn-gap: var(--space-2, 8px);
  --btn-pad-x: var(--space-3, 12px);
  --btn-font: var(--ui-text-md, 15px);
  --btn-icon: var(--ui-icon-md, 18px);
}

/* Base button contract. Old page-specific classes stay valid, but inherit one physical model. */
.btn,
.ui-btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn,
.catalog-tool-btn,
.mo-action-btn,
.msng-action-btn,
.parts-action-btn,
.master-action-btn,
.admin-action-btn,
.news-action-btn,
.flow-btn,
.mmaster-footer-btn,
.msng-loyalty-btn,
.msng-empty-preview__btn,
.parts-share-btn,
.parts-cart-btn,
.part-rating-btn,
.news-back-btn,
.mo-search-submit,
.mo-search-clear,
.mo-search-toggle,
.cmodal-close,
.modal-close-v2{
  box-sizing: border-box !important;
  min-width: 0;
  min-height: var(--btn-height-md) !important;
  border-radius: var(--btn-radius) !important;
  font-family: inherit;
  font-size: var(--btn-font);
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: 0 var(--btn-pad-x);
  border: 1px solid var(--ui-border, rgba(15,23,42,.12));
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  vertical-align: middle;
  max-width: 100%;
}

.btn *,
.ui-btn *,
.catalog-tool-btn *,
.mo-action-btn *,
.msng-action-btn *,
.parts-action-btn *,
.master-action-btn *,
.admin-action-btn *,
.news-action-btn *{
  min-width: 0;
}

.btn span,
.ui-btn span,
.catalog-tool-btn span,
.mo-action-btn span,
.msng-action-btn span,
.parts-action-btn span,
.master-action-btn span,
.admin-action-btn span,
.news-action-btn span{
  flex: 0 0 auto;
}

.btn b,
.ui-btn b,
.catalog-tool-btn b,
.mo-action-btn b,
.msng-action-btn b,
.parts-action-btn b,
.master-action-btn b,
.admin-action-btn b,
.news-action-btn b,
.btn .btn-text,
.ui-btn .btn-text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn:focus-visible,
.ui-btn:focus-visible,
.catalog-tool-btn:focus-visible,
.mo-action-btn:focus-visible,
.msng-action-btn:focus-visible,
.parts-action-btn:focus-visible,
.master-action-btn:focus-visible,
.admin-action-btn:focus-visible,
.news-action-btn:focus-visible,
.mo-search-submit:focus-visible,
.mo-search-clear:focus-visible,
.cmodal-close:focus-visible,
.modal-close-v2:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent, #f97316) 62%, transparent) !important;
  outline-offset: 2px;
}

/* Variants: keep old class names, map them to a single visual contract. */
.btn-primary,
.btn--primary,
.ui-btn--primary,
.catalog-tool-btn.is-primary,
.mo-action-btn--primary,
.parts-action-btn--primary,
.master-action-btn--primary,
.news-action-btn--primary,
.flow-btn--primary{
  background: linear-gradient(135deg, var(--orange, #ff6b00), var(--orange-l, #ff8a2a)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(255,107,0,.22) !important;
}

.btn-outline,
.btn-secondary,
.btn--secondary,
.ui-btn--secondary,
.mo-action-btn--secondary,
.parts-action-btn--secondary,
.master-action-btn--secondary,
.news-action-btn--secondary,
.flow-btn--secondary{
  background: var(--ui-surface, #fff) !important;
  color: var(--accent, var(--orange, #ff6b00)) !important;
  border-color: color-mix(in srgb, var(--accent, #f97316) 34%, var(--ui-border, rgba(15,23,42,.12))) !important;
  box-shadow: none !important;
}

.btn-ghost,
.btn--ghost,
.ui-btn--ghost,
.mo-action-btn--ghost,
.parts-action-btn--ghost,
.master-action-btn--ghost,
.news-action-btn--ghost{
  background: transparent !important;
  color: var(--text2, #475569) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn-danger,
.btn--danger,
.ui-btn--danger,
.mo-action-btn--danger,
.parts-action-btn--danger,
.master-action-btn--danger,
.news-action-btn--danger{
  background: var(--danger, #ef4444) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(239,68,68,.18) !important;
}

.btn:hover,
.ui-btn:hover,
.catalog-tool-btn:hover,
.mo-action-btn:hover,
.msng-action-btn:hover,
.parts-action-btn:hover,
.master-action-btn:hover,
.admin-action-btn:hover,
.news-action-btn:hover,
.flow-btn:hover{
  transform: translateY(-1px);
}

.btn:active,
.ui-btn:active,
.catalog-tool-btn:active,
.mo-action-btn:active,
.msng-action-btn:active,
.parts-action-btn:active,
.master-action-btn:active,
.admin-action-btn:active,
.news-action-btn:active,
.flow-btn:active{
  transform: translateY(0);
}

.btn[disabled],
.ui-btn[disabled],
button[disabled].btn,
.catalog-tool-btn[disabled],
.mo-action-btn[disabled],
.msng-action-btn[disabled],
.parts-action-btn[disabled],
.master-action-btn[disabled],
.admin-action-btn[disabled],
.news-action-btn[disabled],
.flow-btn[disabled],
.btn.is-disabled,
.ui-btn.is-disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  transform: none !important;
}

/* Sizes. */
.btn-xs,
.btn-sm,
.ui-btn--sm{
  min-height: var(--btn-height-sm) !important;
  font-size: 13px !important;
  padding-inline: var(--space-2, 8px) !important;
}
.btn-md,
.ui-btn--md{
  min-height: var(--btn-height-md) !important;
}
.btn-lg,
.ui-btn--lg{
  min-height: var(--btn-height-lg) !important;
  font-size: 16px !important;
  padding-inline: var(--space-4, 16px) !important;
}
.btn--block,
.ui-btn--block,
.btn.block{
  width: 100%;
  justify-content: center;
}

/* Icon-only buttons stay square and do not inherit long text metrics. */
.btn--icon,
.ui-btn--icon,
.cmodal-close,
.modal-close-v2,
.mo-search-clear,
.msng-close-btn,
.msng-back-btn,
.msng-back-btn2,
.msng-hd-btn,
.msng-hd-btn2,
.msng-send-btn,
.msng-chat-avatar-btn,
.parts-cart-btn,
.part-rating-btn{
  width: var(--btn-height-md) !important;
  min-width: var(--btn-height-md) !important;
  max-width: var(--btn-height-md) !important;
  height: var(--btn-height-md) !important;
  min-height: var(--btn-height-md) !important;
  padding: 0 !important;
  flex: 0 0 var(--btn-height-md);
}

.msng-send-btn{
  border-radius: var(--ui-radius-btn, 10px) !important;
  background: var(--orange, #ff6b00) !important;
  color: #fff !important;
}

/* Unified hero/tools buttons: override older action-template conflicts without changing markup. */
.catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn,
.spa-page-hero--with-tools .spa-hero-tools-body .catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn{
  min-height: var(--btn-height-md) !important;
  height: auto !important;
  border-radius: var(--ui-radius-btn, 10px) !important;
  padding: var(--space-2, 8px) var(--space-3, 12px) !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: var(--space-2, 8px) !important;
  background: var(--ui-surface, #fff) !important;
  border: 1px solid var(--ui-border, rgba(15,23,42,.12)) !important;
  box-shadow: none !important;
  color: var(--text, #111827) !important;
  text-align: left !important;
  overflow: hidden !important;
  position: relative;
  z-index: var(--z-base, 1);
}

.catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn__ico,
.spa-page-hero--with-tools .spa-hero-tools-body .catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn__ico{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: var(--ui-radius-sm, 5px) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 16px !important;
  background: color-mix(in srgb, var(--accent, #f97316) 12%, transparent) !important;
  color: var(--accent, #f97316) !important;
}

.catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn--filters .catalog-tool-btn__ico{
  background: color-mix(in srgb, var(--accent, #f97316) 16%, transparent) !important;
}
.catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn--settings .catalog-tool-btn__ico{
  background: color-mix(in srgb, var(--text, #111827) 8%, transparent) !important;
  color: var(--text2, #475569) !important;
}

.catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn b,
.spa-page-hero--with-tools .spa-hero-tools-body .catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn b{
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

.catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn:hover,
.catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn:focus-visible{
  background: color-mix(in srgb, var(--accent, #f97316) 7%, var(--ui-surface, #fff)) !important;
  border-color: color-mix(in srgb, var(--accent, #f97316) 38%, var(--ui-border, rgba(15,23,42,.12))) !important;
}

/* Search buttons belong to the same button scale. */
.mo-search-submit{
  min-width: var(--btn-height-md) !important;
  background: var(--orange, #ff6b00) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.mo-search-submit span{font-size: 16px;}
.mo-search-submit b{white-space: nowrap;}

/* Action rows: no overflow, consistent wrapping. */
.mo-card-actions,
.part-card-v2-foot,
.part-details-actions,
.product-buybox__actions,
.master-return-card-actions,
.master-cabinet-hero .mch-actions,
.cmodal-actions,
.msng-attach-preview-actions,
.msng-media-viewer__actions{
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.mo-card-actions .btn,
.part-card-v2-foot .btn,
.part-details-actions .btn,
.product-buybox__actions .btn,
.master-return-card-actions .btn,
.master-cabinet-hero .mch-actions .btn,
.cmodal-actions .btn,
.msng-attach-preview-actions .btn,
.msng-media-viewer__actions .btn{
  flex: 1 1 130px;
  justify-content: center;
}

@media (max-width: 640px){
  .btn,
  .ui-btn,
  button.btn,
  a.btn,
  .catalog-tool-btn,
  .mo-action-btn,
  .msng-action-btn,
  .parts-action-btn,
  .master-action-btn,
  .admin-action-btn,
  .news-action-btn,
  .flow-btn{
    min-height: var(--ui-touch-target, 44px) !important;
    font-size: 14px;
  }

  .catalog-tools[data-catalog-render="unified-v2"] .catalog-tools__actions,
  .spa-page-hero--with-tools .spa-hero-tools-body .catalog-tools[data-catalog-render="unified-v2"] .catalog-tools__actions{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: var(--space-2, 8px) !important;
  }

  .catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn,
  .spa-page-hero--with-tools .spa-hero-tools-body .catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn{
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: var(--ui-touch-target, 44px) !important;
    grid-template-columns: 28px minmax(0,1fr) !important;
    gap: 5px !important;
    padding: 6px 7px !important;
    text-align: center !important;
  }

  .catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn__ico,
  .spa-page-hero--with-tools .spa-hero-tools-body .catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn__ico{
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 14px !important;
  }

  .catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn b,
  .spa-page-hero--with-tools .spa-hero-tools-body .catalog-tools[data-catalog-render="unified-v2"] .catalog-tool-btn b{
    font-size: 11.5px !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .mo-card-actions .btn,
  .part-card-v2-foot .btn,
  .part-details-actions .btn,
  .product-buybox__actions .btn,
  .cmodal-actions .btn,
  .msng-attach-preview-actions .btn,
  .msng-media-viewer__actions .btn{
    flex: 1 1 calc(50% - var(--space-2, 8px));
  }
}

@media (hover: none){
  .btn:hover,
  .ui-btn:hover,
  .catalog-tool-btn:hover,
  .mo-action-btn:hover,
  .msng-action-btn:hover,
  .parts-action-btn:hover,
  .master-action-btn:hover,
  .admin-action-btn:hover,
  .news-action-btn:hover,
  .flow-btn:hover{
    transform: none !important;
  }
}