/* =========================================================
   OMEGA AUTO PARTS – MODERN BUTTON SYSTEM
   Bootstrap 3 → Bootstrap 5 style
   Safe override layer
   ========================================================= */

/* ---------- THEME VARIABLES ---------- */
:root {
    --oap-primary: #1b6bb1;
  
    /* darker steps */
    --oap-primary-d1: #155a97;
    --oap-primary-d2: #104a7d;
    --oap-primary-d3: #0c3c66;
  
    --oap-white: #ffffff;
  
    /* shadows */
    --oap-shadow-soft: 0 1px 2px rgba(0,0,0,.08);
    --oap-shadow-inset: inset 0 2px 4px rgba(0,0,0,.2);
  }
  
  /* ---------- BASE BUTTON RESET ---------- */
  button,
  .btn {
    border-radius: 0.15rem;
    text-transform: none;
  }
  
  button:focus,
  .btn:focus {
    outline: none !important;
  }
  
  /* ---------- BASE BUTTON ---------- */
  .btn {
    display: inline-block;
    padding: 6px 14px;
  
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
  
    color: var(--oap-white);
    background-color: transparent;
  
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
  
    transition:
      background-color .15s ease-in-out,
      border-color .15s ease-in-out,
      box-shadow .15s ease-in-out,
      transform .05s ease-in-out;
  }
  
  /* ---------- PRIMARY BUTTON ---------- */
  .btn-primary {
    background: linear-gradient(
      to bottom,
      var(--oap-primary) 5%,
      var(--oap-primary-d2) 100%
    );
    background-color: var(--oap-primary);
  
    border-color: var(--oap-primary-d2);
    box-shadow: var(--oap-shadow-soft);
  
    color: var(--oap-white);
  }
  
  /* ---------- HOVER ---------- */
  .btn-primary:hover {
    background: linear-gradient(
      to bottom,
      var(--oap-primary-d1) 5%,
      var(--oap-primary-d3) 100%
    );
    background-color: var(--oap-primary-d1);
  
    border-color: var(--oap-primary-d3);
    color: var(--oap-white);
  }
  
  /* ---------- ACTIVE / FOCUS ---------- */
  .btn-primary:active,
  .btn-primary:focus {
    background: linear-gradient(
      to bottom,
      var(--oap-primary-d2) 5%,
      var(--oap-primary-d3) 100%
    );
    background-color: var(--oap-primary-d2);
  
    border-color: var(--oap-primary-d3);
    box-shadow: var(--oap-shadow-inset);
  }
  
  /* ---------- DISABLED ---------- */
  .btn-primary:disabled,
  .btn-primary.disabled {
    background: #adb5bd;
    border-color: #9aa1a7;
    color: #6c757d;
  
    box-shadow: none;
    opacity: .65;
    cursor: not-allowed;
  }
  
  /* ---------- INPUT GROUP ---------- */
  .input-group-btn > .btn,
  .input-group .btn {
    position: relative;
    z-index: 2;
  }
  
  .input-group .btn:focus {
    z-index: 5;
  }
  
  .input-group-btn:last-child > .btn,
  .input-group > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  /* ---------- MOBILE ---------- */
  @media (max-width: 767px) {
    .btn {
      margin-bottom: 3px;
    }
  }